<!DOCTYPE html><!--HTML5 doctype-->
<html>
  <head>
    <title>Documentation</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">

    <link rel="stylesheet" type="text/css" href="af.ui.css" />
 <link rel="stylesheet" type="text/css" href="icons.css" />

    <!--<script type="text/javascript" charset="utf-8" src="appframework.ui.min.js"></script>-->
    <script src="appframework.js"></script>
    <script src="appframework.ui.js"></script>
    <script>
    function aj(obj){
      console.log(obj);
      alert(JSON.stringify(obj));
    }
    if(!$.os.ios&&!$.os.android){
      $.os.desktop=true;
      var sheet = document.createElement('style')
      sheet.innerHTML = "* {-webkit-user-select:text;!important};}";
      $("head").append(sheet);
      $.ui.ready(function(){
        $("#menu").css("overflow","auto");
      });
    }

    function toggleSource(ind,el){
      $("#source_"+ind).toggle();
      $el=$(el);
      if($el.html().toLowerCase()=="show source"){
        $el.replaceClass("collapsed","expanded");
        $el.html("Hide Source");
      }
      else {
       $el.replaceClass("expanded","collapsed");
        $el.html("Show Source");
      }
    }
    </script>
    <script type="text/javascript">
        /* This function runs once the page is loaded, but appMobi is not yet active */
    	var webRoot="/documentation/";
    	$.ui.autoLaunch=true;
      $.ui.backButtonText="Back";
    </script>
    <style>
    .greenredclass {
        background:green;
        color:red;
    }
  .blueyellowclass {
    background:blue;
    color:yellow;
  }
  .markdown pre {
    padding-top:10px    ;
    margin-left:0px;
    padding-bottom:10px;
  }

  .markdown p {
    background:transparent;
    box-shadow:none;
    -webkit-box-shadow:none;
    padding:0px;
    padding-bottom:5px;

  }

   pre {
      background:#969fa7;
      width:100%;
      counter-reset: linenumbers;
      margin-bottom:10px;
      border-radius:8px;
      color:white;
      font:normal 14px/17px Couriour New,Couriour;
      overflow:auto;
      -webkit-overflow-scrolling:touch;
    }

    code{
      background:#969fa7;
      overflow:auto;
      color:white;
    }

    h3{
      display:block;
      background:#969fa7;
      overflow:auto;
      color:white;
      height:48px;
      width:100%;
    }
    h3 a {
       display: block;
      width: 100%;
      height: 100%;
    }


   .linenumber {
        padding-left:5px;
    }
    .linenumber:before{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        float: left;
        padding: 0 5px;
        text-align: right;
        width: 50px;
        padding-right:5px;
    }

    .linenumber:before {
        color:white;
        content: counter(linenumbers) ".";
        counter-increment: linenumbers;
    }

    .source {
        display:none
    }
    @media handheld, only screen and (min-width: 768px){
    .source{
        display:block;
    }
    }

    .viewsource {
        border-top:1px solid #999;
    }
    </style>
  </head>
  <body>
    <div id="afui">
      <div id="header">
        <a id="menubadge" onclick="$.ui.toggleSideMenu()" style="float:right;margin-top:0px" class="menuButton"></a>
      </div>

      <div id="content">
      	<div title='Documentation' id="main" class="panel" selected="true">
      		<ul class='list'>
      		<li><a href='#appframework'>appframework</a></li>
<li><a href='#af_ui'>af.ui</a></li>
      		</ul>

      	</div>
          <div id='appframework' title='appframework'  class='panel' data-nav='nav_appframework'><ul class='list'><li><a data-persist-ajax='true' href='#$_is$'>$.is$</a></li>
<li><a data-persist-ajax='true' href='#$_map'>$.map</a></li>
<li><a data-persist-ajax='true' href='#$_each'>$.each</a></li>
<li><a data-persist-ajax='true' href='#$_extend'>$.extend</a></li>
<li><a data-persist-ajax='true' href='#$_isArray'>$.isArray</a></li>
<li><a data-persist-ajax='true' href='#$_isFunction'>$.isFunction</a></li>
<li><a data-persist-ajax='true' href='#$_isObject'>$.isObject</a></li>
<li><a data-persist-ajax='true' href='#_map'>.map</a></li>
<li><a data-persist-ajax='true' href='#_each'>.each</a></li>
<li><a data-persist-ajax='true' href='#_ready'>.ready</a></li>
<li><a data-persist-ajax='true' href='#_find'>.find</a></li>
<li><a data-persist-ajax='true' href='#_html'>.html</a></li>
<li><a data-persist-ajax='true' href='#_text'>.text</a></li>
<li><a data-persist-ajax='true' href='#_css'>.css</a></li>
<li><a data-persist-ajax='true' href='#_vendorCss'>.vendorCss</a></li>
<li><a data-persist-ajax='true' href='#_computedStyle'>.computedStyle</a></li>
<li><a data-persist-ajax='true' href='#_empty'>.empty</a></li>
<li><a data-persist-ajax='true' href='#_hide'>.hide</a></li>
<li><a data-persist-ajax='true' href='#_show'>.show</a></li>
<li><a data-persist-ajax='true' href='#_toggle'>.toggle</a></li>
<li><a data-persist-ajax='true' href='#_val'>.val</a></li>
<li><a data-persist-ajax='true' href='#_attr'>.attr</a></li>
<li><a data-persist-ajax='true' href='#_removeAttr'>.removeAttr</a></li>
<li><a data-persist-ajax='true' href='#_prop'>.prop</a></li>
<li><a data-persist-ajax='true' href='#_removeProp'>.removeProp</a></li>
<li><a data-persist-ajax='true' href='#_remove'>.remove</a></li>
<li><a data-persist-ajax='true' href='#_addClass'>.addClass</a></li>
<li><a data-persist-ajax='true' href='#_removeClass'>.removeClass</a></li>
<li><a data-persist-ajax='true' href='#_toggleClass'>.toggleClass</a></li>
<li><a data-persist-ajax='true' href='#_replaceClass'>.replaceClass</a></li>
<li><a data-persist-ajax='true' href='#_hasClass'>.hasClass</a></li>
<li><a data-persist-ajax='true' href='#_append'>.append</a></li>
<li><a data-persist-ajax='true' href='#_appendTo'>.appendTo</a></li>
<li><a data-persist-ajax='true' href='#_prependTo'>.prependTo</a></li>
<li><a data-persist-ajax='true' href='#_prepend'>.prepend</a></li>
<li><a data-persist-ajax='true' href='#_insertBefore'>.insertBefore</a></li>
<li><a data-persist-ajax='true' href='#_insertAfter'>.insertAfter</a></li>
<li><a data-persist-ajax='true' href='#_get'>.get</a></li>
<li><a data-persist-ajax='true' href='#_offset'>.offset</a></li>
<li><a data-persist-ajax='true' href='#_height'>.height</a></li>
<li><a data-persist-ajax='true' href='#_width'>.width</a></li>
<li><a data-persist-ajax='true' href='#_parent'>.parent</a></li>
<li><a data-persist-ajax='true' href='#_parents'>.parents</a></li>
<li><a data-persist-ajax='true' href='#_children'>.children</a></li>
<li><a data-persist-ajax='true' href='#_siblings'>.siblings</a></li>
<li><a data-persist-ajax='true' href='#_closest'>.closest</a></li>
<li><a data-persist-ajax='true' href='#_filter'>.filter</a></li>
<li><a data-persist-ajax='true' href='#_not'>.not</a></li>
<li><a data-persist-ajax='true' href='#_data'>.data</a></li>
<li><a data-persist-ajax='true' href='#_end'>.end</a></li>
<li><a data-persist-ajax='true' href='#_clone'>.clone</a></li>
<li><a data-persist-ajax='true' href='#_size'>.size</a></li>
<li><a data-persist-ajax='true' href='#_serialize'>.serialize</a></li>
<li><a data-persist-ajax='true' href='#_eq'>.eq</a></li>
<li><a data-persist-ajax='true' href='#_index'>.index</a></li>
<li><a data-persist-ajax='true' href='#_is'>.is</a></li>
<li><a data-persist-ajax='true' href='#$_jsonP'>$.jsonP</a></li>
<li><a data-persist-ajax='true' href='#$_ajax'>$.ajax</a></li>
<li><a data-persist-ajax='true' href='#$_get'>$.get</a></li>
<li><a data-persist-ajax='true' href='#$_post'>$.post</a></li>
<li><a data-persist-ajax='true' href='#$_getJSON'>$.getJSON</a></li>
<li><a data-persist-ajax='true' href='#$_param'>$.param</a></li>
<li><a data-persist-ajax='true' href='#$_parseJSON'>$.parseJSON</a></li>
<li><a data-persist-ajax='true' href='#$_parseXML'>$.parseXML</a></li>
<li><a data-persist-ajax='true' href='#$_uuid'>$.uuid</a></li>
<li><a data-persist-ajax='true' href='#$_create'>$.create</a></li>
<li><a data-persist-ajax='true' href='#$_query'>$.query</a></li>
<li><a data-persist-ajax='true' href='#_bind'>.bind</a></li>
<li><a data-persist-ajax='true' href='#_unbind'>.unbind</a></li>
<li><a data-persist-ajax='true' href='#_one'>.one</a></li>
<li><a data-persist-ajax='true' href='#_delegate'>.delegate</a></li>
<li><a data-persist-ajax='true' href='#_undelegate'>.undelegate</a></li>
<li><a data-persist-ajax='true' href='#_on'>.on</a></li>
<li><a data-persist-ajax='true' href='#_off'>.off</a></li>
<li><a data-persist-ajax='true' href='#_trigger'>.trigger</a></li>
<li><a data-persist-ajax='true' href='#$_Event'>$.Event</a></li>
<li><a data-persist-ajax='true' href='#$_bind'>$.bind</a></li>
<li><a data-persist-ajax='true' href='#$_trigger'>$.trigger</a></li>
<li><a data-persist-ajax='true' href='#$_unbind'>$.unbind</a></li>
<li><a data-persist-ajax='true' href='#$_proxy'>$.proxy</a></li>
<li><a data-persist-ajax='true' href='#$_cleanUpContent'>$.cleanUpContent</a></li>
<li><a data-persist-ajax='true' href='#$_parseJS'>$.parseJS</a></li>
</ul></div>
<div id='af_ui' title='af.ui'  class='panel' data-nav='nav_af_ui'><ul class='list'><li><a data-persist-ajax='true' href='#$_ui_setSideMenuWidth'>$.ui.setSideMenuWidth</a></li>
<li><a data-persist-ajax='true' href='#$_ui_disableNativeScrolling'>$.ui.disableNativeScrolling</a></li>
<li><a data-persist-ajax='true' href='#$_ui_manageHistory'>$.ui.manageHistory</a></li>
<li><a data-persist-ajax='true' href='#$_ui_loadDefaultHash'>$.ui.loadDefaultHash</a></li>
<li><a data-persist-ajax='true' href='#$_ui_useAjaxCacheBuster'>$.ui.useAjaxCacheBuster</a></li>
<li><a data-persist-ajax='true' href='#$_ui_actionsheet'>$.ui.actionsheet</a></li>
<li><a data-persist-ajax='true' href='#$_ui_popup'>$.ui.popup</a></li>
<li><a data-persist-ajax='true' href='#$_ui_blockUI'>$.ui.blockUI</a></li>
<li><a data-persist-ajax='true' href='#$_ui_unblockUI'>$.ui.unblockUI</a></li>
<li><a data-persist-ajax='true' href='#$_ui_removeFooterMenu'>$.ui.removeFooterMenu</a></li>
<li><a data-persist-ajax='true' href='#$_ui_autoLaunch'>$.ui.autoLaunch</a></li>
<li><a data-persist-ajax='true' href='#$_ui_showBackButton'>$.ui.showBackButton</a></li>
<li><a data-persist-ajax='true' href='#$_ui_backButtonText'>$.ui.backButtonText</a></li>
<li><a data-persist-ajax='true' href='#$_ui_resetScrollers'>$.ui.resetScrollers</a></li>
<li><a data-persist-ajax='true' href='#$_ui_ready'>$.ui.ready</a></li>
<li><a data-persist-ajax='true' href='#$_ui_setBackButtonStyle'>$.ui.setBackButtonStyle</a></li>
<li><a data-persist-ajax='true' href='#$_ui_goBack'>$.ui.goBack</a></li>
<li><a data-persist-ajax='true' href='#$_ui_clearHistory'>$.ui.clearHistory</a></li>
<li><a data-persist-ajax='true' href='#$_ui_updateBadge'>$.ui.updateBadge</a></li>
<li><a data-persist-ajax='true' href='#$_ui_removeBadge'>$.ui.removeBadge</a></li>
<li><a data-persist-ajax='true' href='#$_ui_toggleNavMenu'>$.ui.toggleNavMenu</a></li>
<li><a data-persist-ajax='true' href='#$_ui_toggleHeaderMenu'>$.ui.toggleHeaderMenu</a></li>
<li><a data-persist-ajax='true' href='#$_ui_toggleSideMenu'>$.ui.toggleSideMenu</a></li>
<li><a data-persist-ajax='true' href='#$_ui_disableSideMenu'>$.ui.disableSideMenu</a></li>
<li><a data-persist-ajax='true' href='#$_ui_enableSideMenu'>$.ui.enableSideMenu</a></li>
<li><a data-persist-ajax='true' href='#$_ui_updateNavbarElements'>$.ui.updateNavbarElements</a></li>
<li><a data-persist-ajax='true' href='#$_ui_updateHeaderElements'>$.ui.updateHeaderElements</a></li>
<li><a data-persist-ajax='true' href='#$_ui_updateSideMenuElements'>$.ui.updateSideMenuElements</a></li>
<li><a data-persist-ajax='true' href='#$_ui_setTitle'>$.ui.setTitle</a></li>
<li><a data-persist-ajax='true' href='#$_ui_setBackButtonText'>$.ui.setBackButtonText</a></li>
<li><a data-persist-ajax='true' href='#$_ui_showMask'>$.ui.showMask</a></li>
<li><a data-persist-ajax='true' href='#$_ui_hideMask'>$.ui.hideMask</a></li>
<li><a data-persist-ajax='true' href='#$_ui_showModal'>$.ui.showModal</a></li>
<li><a data-persist-ajax='true' href='#$_ui_hideModal'>$.ui.hideModal</a></li>
<li><a data-persist-ajax='true' href='#$_ui_updatePanel'>$.ui.updatePanel</a></li>
<li><a data-persist-ajax='true' href='#$_ui_updateContentDiv'>$.ui.updateContentDiv</a></li>
<li><a data-persist-ajax='true' href='#$_ui_addContentDiv'>$.ui.addContentDiv</a></li>
<li><a data-persist-ajax='true' href='#$_ui_scrollToTop'>$.ui.scrollToTop</a></li>
<li><a data-persist-ajax='true' href='#$_ui_scrollToBottom'>$.ui.scrollToBottom</a></li>
<li><a data-persist-ajax='true' href='#$_ui_loadContent'>$.ui.loadContent</a></li>
<li><a data-persist-ajax='true' href='#$_ui_launch'>$.ui.launch</a></li>
<li><a data-persist-ajax='true' href='#$_ui_finishTransition'>$.ui.finishTransition</a></li>
</ul></div>
          

       <div id='$_is$' title='$.is$(param)' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_is$",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_is$' style='display:none'>
            <pre style='padding-left:25px'><code>
            $.is$ = function(obj) {
            return obj instanceof $afm;
        };
            </code></pre>
             </div>
      </div>
          <h2>$.is$(param)</h2>



          <section class='description'><p>Checks to see if the parameter is a $afm object<br />                        var foo=$('#header');<br />            $.is$(foo);<br />            </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>element - Object</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Boolean - </div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.is$ checks to see if the instance of an object is of type "$" or "$afm or App Framework.  This is usefull for checking for parameter types in functions.</p>

<pre><code class="language-js"><span class='linenumber'>var tmp = $("div");</span>
<span class='linenumber'>var bar=null;</span>
<span class='linenumber'>function test(el){</span>
<span class='linenumber'>    if($.is$(el)) //if we have an App Framework object, get the first element</span>
<span class='linenumber'>       el=el[0];</span>
<span class='linenumber'>};</span>
<span class='linenumber'>alert(test(tmp));//true</span>
<span class='linenumber'>alert(test(bar));//false</span>
</code></pre>

<div class="sample" style='height:100px'>
<script>
var tmp=$("div");
var bar=null;
function testIs(what){
    if(what){
        alert($.is$(tmp));
    }
    else
        alert($.is$(bar));
}
</script>
Test it on the following.  <input type='button' onclick="testIs(true)" value="tmp">  <input type='button' onclick="testIs(false)" value="bar">
</div>

              </div>
             </div>
          </article>
       </div>

       <div id='$_map' title='$.map(elements,callback)' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_map",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_map' style='display:none'>
            <pre style='padding-left:25px'><code>
            $.map = function(elements, callback) {
            var value, values = [],
                i, key;
            if ($.isArray(elements))
                for (i = 0; i &lt; elements.length; i++) {
                    value = callback.apply(elements[i],[i,elements[i]]);
                    if (value !== nundefined)
                        values.push(value);
            } else if ($.isObject(elements))
                for (key in elements) {
                    if (!elements.hasOwnProperty(key) || key == "length")
                        continue;
                    value = callback(elements[key],[key,elements[key]]);
                    if (value !== nundefined)
                        values.push(value);
            }
            return af(values);
        };
            </code></pre>
             </div>
      </div>
          <h2>$.map(elements,callback)</h2>



          <section class='description'><p>Map takes in elements and executes a callback function on each and returns a collection<br />                $.map([1,2],function(ind){return ind+1});<br />        </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>elements - Array|Object</li>
<li style='padding-left:15px;line-height:20px'>callback - Function</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - appframework object with elements in it</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>Map takes in elements and executes a callback function on each element.  It returns a new App Framework object with the values in the collection.</p>

<p>The following example will loop through an array and add 1 to each element value and return a new App Framework object</p>

<pre><code class="language-js"><span class='linenumber'>function testMap(){</span>
<span class='linenumber'>    var final=[1,2,3];</span>
<span class='linenumber'>    var res=$.map([0,1,2],function(ind){return ind+1}).get(0);</span>
<span class='linenumber'>    var pass=true;</span>
<span class='linenumber'>    if(final.length!==res.length){</span>
<span class='linenumber'>        pass=false;</span>
<span class='linenumber'>    }</span>
<span class='linenumber'>    for(var i=0; i &lt; final.length; i++){</span>
<span class='linenumber'>        if(final[i]!==res[i])</span>
<span class='linenumber'>            pass=false;</span>
<span class='linenumber'>    }</span>
<span class='linenumber'>    alert(pass);</span>
<span class='linenumber'>}</span>
</code></pre>

<script>
function testMap(){
    var final=[1,2,3];
    var res=$.map([0,1,2],function(ind){return ind+1}).get(0);
    var pass=true;
    if(final.length!==res.length){
        pass=false;
    }
    for(var i=0; i < final.length; i++){
        if(final[i]!==res[i])
            pass=false;
    }
    alert(pass);
}
</script>

<p><input type="button" onclick="testMap()" value="Test it"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_each' title='$.each(elements,callback)' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_each",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_each' style='display:none'>
            <pre style='padding-left:25px'><code>
            $.each = function(elements, callback) {
            var i, key;
            if ($.isArray(elements))
                for (i = 0; i &lt; elements.length; i++) {
                    if (callback(i, elements[i]) === false)
                        return elements;
            } else if ($.isObject(elements))
                for (key in elements) {
                    if (!elements.hasOwnProperty(key) || key == "length")
                        continue;
                    if (callback(key, elements[key]) === false)
                        return elements;
            }
            return elements;
        };
            </code></pre>
             </div>
      </div>
          <h2>$.each(elements,callback)</h2>



          <section class='description'><p>Iterates through elements and executes a callback.  Returns if false<br />                $.each([1,2],function(ind){console.log(ind);});<br />        </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>elements - Array|Object</li>
<li style='padding-left:15px;line-height:20px'>callback - Function</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Array - elements</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.each allows you to iterate through a collection and execute a callback.  Does not have to be DOM nodes.</p>

<p>The callback recieves two parameters, the index of the element (or key in an object) and then the element</p>

<p>Below is a simple function that will iterate through an array and add the values to the "sum" variable.</p>

<pre><code class="language-js"><span class='linenumber'>function getSum(arr){</span>
<span class='linenumber'>    var sum=0;</span>
<span class='linenumber'>    $.each(arr,function(index,val){sum+=val});</span>
<span class='linenumber'>    return sum;</span>
<span class='linenumber'>}</span>
<span class='linenumber'>alert(getSum([1,2,3,4]));</span>
</code></pre>

<p>Try it below.  The response should be 10;</p>

<script>
function getSum(arr){
    var sum=0;
    $.each(arr,function(index,val){sum+=val;});
    return sum;
}
function testSum(){
    alert(getSum([1,2,3,4]));
}
</script>

<p><input type="button" value="Get Sum" onclick="testSum()"/></p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_extend' title='$.extend(target,{params})' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_extend",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_extend' style='display:none'>
            <pre style='padding-left:25px'><code>
            $.extend = function(target) {
            if (target == nundefined)
                target = this;
            if (arguments.length === 1) {
                for (var key in target)
                    this[key] = target[key];
                return this;
            } else {
                slice.call(arguments, 1).forEach(function(source) {
                    for (var key in source)
                        target[key] = source[key];
                });
            }
            return target;
        };
            </code></pre>
             </div>
      </div>
          <h2>$.extend(target,{params})</h2>



          <section class='description'><p>Extends an object with additional arguments<br />                        $.extend({foo:'bar'});<br />            $.extend(element,{foo:'bar'});<br />            </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>[target] - Object</li>
<li style='padding-left:15px;line-height:20px'>number - any</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - [target]</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.extend allows you to merge the content of two or more objects into the first object.</p>

<p>A basic example is below.</p>

<pre><code class="language-js"><span class='linenumber'>var cart={</span>
<span class='linenumber'>    apples:1,</span>
<span class='linenumber'>    bread:2</span>
<span class='linenumber'>}</span>
<span class='linenumber'>var productsToAdd={</span>
<span class='linenumber'>    bananas:2,</span>
<span class='linenumber'>    oranges:3</span>
<span class='linenumber'>}</span>
<span class='linenumber'>$.extend(cart,productsToAdd);</span>
<span class='linenumber'>/*</span>
<span class='linenumber'> cart = {</span>
<span class='linenumber'>    apples:1,</span>
<span class='linenumber'>    bread:2,</span>
<span class='linenumber'>    bananas:2,</span>
<span class='linenumber'>    oranges:3,</span>
<span class='linenumber'> }</span>
<span class='linenumber'> */</span>
</code></pre>

<p>You can try it below.  The result is from JSON.stringify(cart);</p>

<script>
function testExtend(){
    var cart={
        apples:1,
        bread:2
    }

    var productsToAdd={
        bananas:2,
        oranges:3
    }

    $.extend(cart,productsToAdd);
    alert(JSON.stringify(cart));
}
</script>

<p><input type="button" value="Test" onclick="testExtend()"/></p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_isArray' title='$.isArray(param)' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_isArray",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_isArray' style='display:none'>
            <pre style='padding-left:25px'><code>
            $.isArray = function(obj) {
            return obj instanceof Array && obj.push != nundefined; //ios 3.1.3 doesn't have Array.isArray
        };
            </code></pre>
             </div>
      </div>
          <h2>$.isArray(param)</h2>



          <section class='description'><p>Checks to see if the parameter is an array<br />                        var arr=[];<br />            $.isArray(arr);<br />            </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>element - Object</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Boolean - </div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.isArray returns true or false if the passed in parameter is indeed an array.</p>

<p>See the following examples</p>

<pre><code class="language-js"><span class='linenumber'>var notArray={};</span>
<span class='linenumber'>var isArray=[];</span>
<span class='linenumber'>function testIsArray(pass){</span>
<span class='linenumber'>    if(pass)</span>
<span class='linenumber'>        alert($.isArray(isArray));</span>
<span class='linenumber'>    else</span>
<span class='linenumber'>        alert($.isArray(notArray));</span>
<span class='linenumber'>}</span>
</code></pre>

<script>
var notArray={};
var isArray=[];

function testIsArray(pass){
    if(pass)
        alert($.isArray(isArray));
    else
        alert($.isArray(notArray));
}

</script>

<p><input type="button" onclick="testIsArray(true)" value="Test Array"/> <input type="button" onclick="testIsArray(false)" value="Test Object"/></p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_isFunction' title='$.isFunction(param)' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_isFunction",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_isFunction' style='display:none'>
            <pre style='padding-left:25px'><code>
            $.isFunction = function(obj) {
            return typeof obj === "function" && !(obj instanceof RegExp);
        };
            </code></pre>
             </div>
      </div>
          <h2>$.isFunction(param)</h2>



          <section class='description'><p>Checks to see if the parameter is a function<br />                        var func=function(){};<br />            $.isFunction(func);<br />            </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>element - Object</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Boolean - </div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.isFunction returns true or false if the passed in parameter is indeed a function.</p>

<p>See the following examples</p>

<pre><code class="language-js"><span class='linenumber'>var notFunction={};</span>
<span class='linenumber'>var isFunction=function(){};</span>
<span class='linenumber'>function testisFunction(pass){</span>
<span class='linenumber'>    if(pass)</span>
<span class='linenumber'>        alert($.isFunction(isFunction));</span>
<span class='linenumber'>    else</span>
<span class='linenumber'>        alert($.isFunction(notFunction));</span>
<span class='linenumber'>}</span>
</code></pre>

<script>
var notFunction={};
var isFunction=function(){};

function testisFunction(pass){
    if(pass)
        alert($.isFunction(isFunction));
    else
        alert($.isFunction(notFunction));
}

</script>

<p><input type="button" onclick="testisFunction(true)" value="Test Function"/> <input type="button" onclick="testisFunction(false)" value="Test Object"/></p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_isObject' title='$.isObject(param)' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_isObject",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_isObject' style='display:none'>
            <pre style='padding-left:25px'><code>
            $.isObject = function(obj) {
            return typeof obj === "object" && obj !== null;
        };
            </code></pre>
             </div>
      </div>
          <h2>$.isObject(param)</h2>



          <section class='description'><p>Checks to see if the parameter is a object<br />                        var foo={bar:'bar'};<br />            $.isObject(foo);<br />            </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>element - Object</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Boolean - </div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.isObject returns true or false if the passed in parameter is indeed an object.</p>

<p>See the following examples</p>

<pre><code class="language-js"><span class='linenumber'>var notObject=function(){};</span>
<span class='linenumber'>var isObject={};</span>
<span class='linenumber'>function testisObject(pass){</span>
<span class='linenumber'>    if(pass)</span>
<span class='linenumber'>        alert($.isObject(isObject));</span>
<span class='linenumber'>    else</span>
<span class='linenumber'>        alert($.isObject(notObject));</span>
<span class='linenumber'>}</span>
</code></pre>

<script>
var notObject={};
var isObject=function(){};

var notObject=function(){};
var isObject={};

function testisObject(pass){
    if(pass)
        alert($.isObject(isObject));
    else
        alert($.isObject(notObject));
}

</script>

<p><input type="button" onclick="testisObject(true)" value="Test Object"/> <input type="button" onclick="testisObject(false)" value="Test Function"/></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_map' title='$().map(function)' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_map",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__map' style='display:none'>
            <pre style='padding-left:25px'><code>
            map: function(fn) {
                var value, values = [],
                    i;
                for (i = 0; i &lt; this.length; i++) {
                    value = fn.apply(this[i],[i,this[i]]);
                    if (value !== nundefined)
                        values.push(value);
                }
                return $(values);
            },
            </code></pre>
             </div>
      </div>
          <h2>$().map(function)</h2>



          <section class='description'><p>This is a wrapper to $.map on the selected elements<br />                                $().map(function(){this.value+=ind});<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>callback - Function</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - an appframework object</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().map is used to iterate through elements and execute a callback function on each element.   The elements can be an Array or an Object.</p>

<p>It returns a NEW App Framework object.</p>

<p>The following would loop through all checkboxes and return a string with every id as a comma separated string</p>

<pre><code class="language-html"><span class='linenumber'>&lt;form&gt;</span>
<span class='linenumber'>    Agree to terms?&lt;input type='checkbox' id='terms'/&gt;&lt;br/&gt;</span>
<span class='linenumber'>    Sign up for offers?&lt;input type='checkbox' id='offers'&gt;&lt;br/&gt;</span>
<span class='linenumber'>    &lt;input type='submit' value='Go'/&gt;</span>
<span class='linenumber'>&lt;/form&gt;</span>
</code></pre>

<pre><code class="language-js"><span class='linenumber'>$('input[type='checkbox']).map(function() {</span>
<span class='linenumber'>    return this.id;</span>
<span class='linenumber'>}).get(0).join(",");</span>
</code></pre>

<p>The above would output the following <code>"terms, offers"</code></p>

<p>Below is a more detailed example.  Here we will create a function to set the height to the smallest div.</p>

<pre><code class="language-html"><span class='linenumber'>&lt;input id="equalize" type="button" value="Equalize"&gt;</span>
<span class='linenumber'>&lt;div class="mapsample" style="background:red; height: 40px;width:50px;float:left;" &gt;&lt;/div&gt;</span>
<span class='linenumber'>&lt;div class="mapsample" style="background:green; height: 70px;width:50px;float:left;" &gt;&lt;/div&gt;</span>
<span class='linenumber'>&lt;div class="mapsample" style="background:blue; height: 50px;width:50px;float:left;" &gt;&lt;/div&gt;</span>
<span class='linenumber'>&lt;script&gt;</span>
<span class='linenumber'>$.fn.equalizeHeights = function() {</span>
<span class='linenumber'>  var maxHeight = this.map(function(i,e) {</span>
<span class='linenumber'>    return $(e).height();</span>
<span class='linenumber'>  }).get(0);</span>
<span class='linenumber'>  return this.height( Math.min.apply(this, minHeight)+"px" );</span>
<span class='linenumber'>};</span>
<span class='linenumber'>$('#equalize').bind("click",function(){</span>
<span class='linenumber'>  $('.mapsample').equalizeHeights();</span>
<span class='linenumber'>});</span>
<span class='linenumber'>&lt;/script&gt;</span>
</code></pre>

<div class="sample" style='height:100px'>

<input id="equalize" type="button" value="Equalize">
<div class='mapsample' style="background:red; height: 40px;width:50px;float:left; "></div>
<div class='mapsample' style="background:green; height: 70px;width:50px;float:left;"></div>
<div class='mapsample' style="background:blue; height: 50px;width:50px;float:left; "></div>
 
 
<script>
$.fn.equalizeHeights = function() {
  var minHeight = this.map(function(i,e) {
    return $(e).height();
  }).get(0);
 
  return this.height( Math.min.apply(this, minHeight)+"px" );
};
 
$('#equalize').bind("click",function(){
  $('.mapsample').equalizeHeights();
});
 
</script>

</div>

              </div>
             </div>
          </article>
       </div>

       <div id='_each' title='$().each(function)' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_each",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__each' style='display:none'>
            <pre style='padding-left:25px'><code>
            each: function(callback) {
                this.forEach(function(el, idx) {
                    callback.call(el, idx, el);
                });
                return this;
            },
            </code></pre>
             </div>
      </div>
          <h2>$().each(function)</h2>



          <section class='description'><p>Iterates through all elements and applys a callback function<br />                                $().each(function(){console.log(this.value)});<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>callback - Function</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - an appframework object</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              
              </div>
             </div>
          </article>
       </div>

       <div id='_ready' title='$().ready(function)' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_ready",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__ready' style='display:none'>
            <pre style='padding-left:25px'><code>
            ready: function(callback) {
                if (document.readyState === "complete" || document.readyState === "loaded" || (!$.os.ie && document.readyState === "interactive")) //IE10 fires interactive too early
                    callback();
                else
                    document.addEventListener("DOMContentLoaded", callback, false);
                return this;
            },
            </code></pre>
             </div>
      </div>
          <h2>$().ready(function)</h2>



          <section class='description'><p>This is executed when DOMContentLoaded happens, or after if you've registered for it.<br />                                $(document).ready(function(){console.log('I'm ready');});<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>callback - Function</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - an appframework object</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().ready will execute a function as soon as the DOM is available.  If it is called after the DOM is ready, it will fire the event right away.</p>

<pre><code class="language-html"><span class='linenumber'>&lt;script&gt;</span>
<span class='linenumber'>$(document).ready(function(){</span>
<span class='linenumber'>    //The dom is ready, do whatever you want</span>
<span class='linenumber'>    $("#readytest").html("The dom is now loaded");</span>
<span class='linenumber'>});</span>
<span class='linenumber'>&lt;/script&gt;</span>
<span class='linenumber'>&lt;div id="readytest"&gt;The dom is not ready&lt;/div&gt;</span>
</code></pre>

<p>Below, you should see the message changed because the DOM is available</p>

<script>
$(document).ready(function(){
    //The dom is ready, do whatever you want
    $("#readytest").html("The dom is now loaded");
});
</script>

<div id="readytest" style='display:block;width:200px;height:200px;color:red'>The dom is not ready</div>

              </div>
             </div>
          </article>
       </div>

       <div id='_find' title='$().find(selector)' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_find",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__find' style='display:none'>
            <pre style='padding-left:25px'><code>
            find: function(sel) {
                if (this.length === 0)
                    return this;
                var elems = [];
                var tmpElems;
                for (var i = 0; i &lt; this.length; i++) {
                    tmpElems = ($(sel, this[i]));

                    for (var j = 0; j &lt; tmpElems.length; j++) {
                        elems.push(tmpElems[j]);
                    }
                }
                return $(unique(elems));
            },
            </code></pre>
             </div>
      </div>
          <h2>$().find(selector)</h2>



          <section class='description'><p>Searches through the collection and reduces them to elements that match the selector<br />                                $("#foo").find('.bar');<br />                $("#foo").find($('.bar'));<br />                $("#foo").find($('.bar').get(0));<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>selector - String|Object|Array</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - an appframework object filtered</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().find() takes in a selector and searches through the collection for matching elements.  The selector can be a CSS selector, App Framework collection or an element.  It returns a new App Framework collection.</p>

<p>Consider the following.  We want to find all elements with class "foo" that are nested inside the div "bar"</p>

<pre><code class="language-html"><span class='linenumber'>&lt;div id="bar"&gt;</span>
<span class='linenumber'>    &lt;ul&gt;</span>
<span class='linenumber'>        &lt;li class="foo"&gt;Foo&lt;/li&gt;</span>
<span class='linenumber'>        &lt;li&gt;Bar&lt;/li&gt;</span>
<span class='linenumber'>    &lt;/ul&gt;</span>
<span class='linenumber'>    &lt;span class="foo"&gt;Foo&lt;/span&gt;</span>
<span class='linenumber'>    &lt;span&gt;Bar&lt;/span&gt;</span>
<span class='linenumber'>&lt;/div&gt;</span>
</code></pre>

<p>Staring with the div "bar", we will find everything with class "foo"</p>

<pre><code class="language-js"><span class='linenumber'>$("#bar").find(".foo"); </span>
</code></pre>

<p>The result is a list item and a span.  Below we will alert the node names of the items found.</p>

<div id="bar">

    <ul>
        <li class="foo">Foo</li>
        <li>Bar</li>
    </ul>
    <span class="foo">Foo</span>
    <span>Bar</span>
</div>

<script>
function findTest(){
    var elems=$("#bar").find(".foo");
    alert(elems[0].nodeName+ " "+elems[1].nodeName); 
}
</script>

<p><input type="button" value="Find Test" onclick="findTest()"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_html' title='$().html([html])' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_html",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__html' style='display:none'>
            <pre style='padding-left:25px'><code>
            html: function(html, cleanup) {
                if (this.length === 0)
                    return this;
                if (html === nundefined)
                    return this[0].innerHTML;

                for (var i = 0; i &lt; this.length; i++) {
                    if (cleanup !== false)
                        $.cleanUpContent(this[i], false, true);
                    if (isWin8) {
                        var item=this[i];
                        MSApp.execUnsafeLocalFunction(function() {
                            item.innerHTML = html;
                        });
                    } else
                        this[i].innerHTML = html;
                }
                return this;
            },
            </code></pre>
             </div>
      </div>
          <h2>$().html([html])</h2>



          <section class='description'><p>Gets or sets the innerHTML for the collection.<br />If used as a get, the first elements innerHTML is returned<br />                                $("#foo").html(); //gets the first elements html<br />                $("#foo").html('new html');//sets the html<br />                $("#foo").html('new html',false); //Do not do memory management cleanup<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>html - String</li>
<li style='padding-left:15px;line-height:20px'>[cleanup] - Bool</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - an appframework object</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().html() will get or set the innerHTML property of DOM node(s)</p>

<p>If you pass in a string, it will set the innerHTML of all the DOM nodes to the new value.</p>

<p>If you do not have a parameter, it will return the first elements innerHTML value;</p>

<pre><code class="language-html"><span class='linenumber'>&lt;div id="bar"&gt;</span>
<span class='linenumber'>    This is some html</span>
<span class='linenumber'>&lt;/div&gt;</span>
<span class='linenumber'>&lt;div id="foo"&gt;</span>
<span class='linenumber'>    We will update this</span>
<span class='linenumber'>&lt;/div&gt;</span>
</code></pre>

<pre><code class="language-js"><span class='linenumber'>var html=$("#bar").html();</span>
<span class='linenumber'>$("#foo").html("new content");</span>
</code></pre>

<div id="html:bar">
    This is some html
</div>

<div id="html:foo">
    We will update this
</div>

<p><input type="button" value="Get HTML" onclick="alert($('#html:bar').html())"> <input type="button" value="Set HTML" onclick="$('#html:foo').html('New Content')"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_text' title='$().text([text])' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_text",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__text' style='display:none'>
            <pre style='padding-left:25px'><code>
            text: function(text) {
                if (this.length === 0)
                    return this;
                if (text === nundefined)
                    return this[0].textContent;
                for (var i = 0; i &lt; this.length; i++) {
                    this[i].textContent = text;
                }
                return this;
            },
            </code></pre>
             </div>
      </div>
          <h2>$().text([text])</h2>



          <section class='description'><p>Gets or sets the innerText for the collection.<br />If used as a get, the first elements innerText is returned<br />                                $("#foo").text(); //gets the first elements text;<br />                $("#foo").text('new text'); //sets the text<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>text - String</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - an appframework object</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().text() will get or set the innerText property of DOM node(s).  This will remove any HTML formatting/nodes.</p>

<p>If you pass in a string, it will set the innerText of all the DOM nodes to the new value.</p>

<p>If you do not have a parameter, it will return the first elements innerText value;</p>

<pre><code class="language-html"><span class='linenumber'>&lt;div id="bar"&gt;</span>
<span class='linenumber'>    This is some text &lt;a&gt;Test&lt;/a&gt;</span>
<span class='linenumber'>&lt;/div&gt;</span>
<span class='linenumber'>&lt;div id="foo"&gt;</span>
<span class='linenumber'>    &lt;div style='background:red'&gt;This has a red background&lt;/div&gt;</span>
<span class='linenumber'>&lt;/div&gt;</span>
</code></pre>

<pre><code class="language-js"><span class='linenumber'>var text=$("#bar").text();</span>
<span class='linenumber'>$("#foo").text("new content");</span>
</code></pre>

<div id="text:bar">
    This is some text <a>Test</a>
</div>

<div id="text:foo">
    <div style='background:red'>This has a red background</div>
</div>

<p><input type="button" value="Get Text" onclick="alert($('#text:bar').text())"> <input type="button" value="Set Text" onclick="$('#text:foo').text('New Content')"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_css' title='$().css(attribute,[value])' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_css",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__css' style='display:none'>
            <pre style='padding-left:25px'><code>
            vendorCss: function(attribute, value, obj) {
                return this.css($.feat.cssPrefix + attribute, value, obj);
            },
            </code></pre>
             </div>
      </div>
          <h2>$().css(attribute,[value])</h2>



          <section class='description'><p>Gets or sets css vendor specific css properties<br />If used as a get, the first elements css property is returned<br />                                $().css("background"); // Gets the first elements background<br />                $().css("background","red")  //Sets the elements background to red<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>attribute - String</li>
<li style='padding-left:15px;line-height:20px'>value - String</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - an appframework object</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().css() will get or set CSS properties on the DOM nodes</p>

<p>If you pass in two parameters, a key and value, it will set the CSS property</p>

<p>If you only supply a key, it will return the first objects value.</p>

<p>Additionally, you can pass in an object as the first parameter and it will set multiple values</p>

<pre><code class="language-js"><span class='linenumber'>$("div").css("display","none"); //Set display:none on all divs</span>
<span class='linenumber'>$("span").css("display");//Get the display property of the first span</span>
<span class='linenumber'>$("div").css({color:'red',background:'black'});//Set the color to red, and the background color to black on all divs</span>
</code></pre>

<div id="css:test">
    This is the CSS test div
</div>

<p><input type="button" value="Set background color" onclick="$('#css:test').css('background','green');"> <input type="button" value="Get background color" onclick="alert($('#css:test').css('background'));">   <input type="button" value="Set has properties" onclick="$('#css:test').css({'background':'blue',color:'pink'});"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_vendorCss' title='$().vendorCss(value)' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_vendorCss",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__vendorCss' style='display:none'>
            <pre style='padding-left:25px'><code>
            cssTranslate: function(val) {
                return this.vendorCss("Transform", "translate" + $.feat.cssTransformStart + val + $.feat.cssTransformEnd);
            },
            </code></pre>
             </div>
      </div>
          <h2>$().vendorCss(value)</h2>



          <section class='description'><p>Performs a css vendor specific transform:translate operation on the collection.</p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>Transform - String</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - an appframework object</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().vendorCss() will get or set CSS properties on the DOM nodes with vendor specific prefixes.  It does not work on a hash set.</p>

<p>$.feat.cssPrefix is the css prefix for each browser.</p>

<p>This is a wrapper to $().css($.feat.cssPrefix+attribute,value);</p>

<p>See <a href="#_css">$().css</a> for more</p>

              </div>
             </div>
          </article>
       </div>

       <div id='_computedStyle' title='$().computedStyle()' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_computedStyle",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__computedStyle' style='display:none'>
            <pre style='padding-left:25px'><code>
            computedStyle: function(val) {
                if (this.length === 0 || val == nundefined) return;
                return window.getComputedStyle(this[0], '')[val];
            },
            </code></pre>
             </div>
      </div>
          <h2>$().computedStyle()</h2>



          <section class='description'><p>Gets the computed style of CSS values</p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>css - String</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Int|String|Float| - css vlaue</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().computedStyle(prop) returns the computed style of the element.</p>

<p>$().css() does not return the computed style, only the value associated with the style attribute.</p>

<p>Let's take the following example below.  $().css() and $().computedStyle will return two different values.</p>

<pre><code class="language-html"><span class='linenumber'>&lt;div id="compTest" style="background:green;width:100px;height:100%;" class="myClass1"&gt;&lt;/div&gt;</span>
</code></pre>

<div style="width:100%;height:100px">
<div id="compTest" style="background:green;width:100px;height:100%;" class="myClass1"></div>
</div>

<p><input type="button" value="Get CSS" onclick="alert($('#compTest').css('height'));"></p>

<p><input type="button" value="Get Computed Style" onclick="alert($('#compTest').computedStyle('height'));"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_empty' title='$().empty()' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_empty",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__empty' style='display:none'>
            <pre style='padding-left:25px'><code>
            empty: function() {
                for (var i = 0; i &lt; this.length; i++) {
                    $.cleanUpContent(this[i], false, true);
                    this[i].textContent = '';
                }
                return this;
            },
            </code></pre>
             </div>
      </div>
          <h2>$().empty()</h2>



          <section class='description'><p>Sets the innerHTML of all elements to an empty string<br />                                $().empty();<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol></ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - an appframework object</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().empty() will empty out the contents of the element.  It is better to use $().empty() than to simply use innerHTML with an empty string because it internally calls $.cleanUpContent to clean up tne node content which prevents memory links.</p>

<p>Consider that there is a div defined and you want to empty the content.</p>

<pre><code class="language-html"><span class='linenumber'>&lt;div id="empty_content" style="border:1px solid black"&gt;</span>
<span class='linenumber'>    This is the content string we will empty</span>
<span class='linenumber'>&lt;/div&gt;</span>
</code></pre>

<p>Empty the contents of the above defined div.</p>

<pre><code class="language-js"><span class='linenumber'>$("#empty_content").empty();</span>
</code></pre>

<p></br></p>

<div id="empty_content" style="border:1px solid black">This is the content string we will empty</div>

<p><input type="button" value="Empty" onclick="$('#empty_content').empty();"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_hide' title='$().hide()' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_hide",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__hide' style='display:none'>
            <pre style='padding-left:25px'><code>
            hide: function() {
                if (this.length === 0)
                    return this;
                for (var i = 0; i &lt; this.length; i++) {
                    if (this.css("display", null, this[i]) != "none") {
                        this[i].setAttribute("afmOldStyle", this.css("display", null, this[i]));
                        this[i].style.display = "none";
                    }
                }
                return this;
            },
            </code></pre>
             </div>
      </div>
          <h2>$().hide()</h2>



          <section class='description'><p>Sets the elements display property to "none".<br />This will also store the old property into an attribute for hide<br />                                $().hide();<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol></ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - an appframework object</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().hide() will set the element's display property to "none", thus hiding the div content.</p>

<p>Consider that there is a div with some content that you want to hide</p>

<pre><code class="language-html"><span class='linenumber'>&lt;div id="hide_content" style="border:1px solid green"&gt;</span>
<span class='linenumber'>    This is the content we will hide</span>
<span class='linenumber'>&lt;/div&gt;</span>
</code></pre>

<p>Based upon some event, you can then hide the div</p>

<pre><code class="language-js"><span class='linenumber'>$("#hide_content").hide();</span>
</code></pre>

<p></br></p>

<div id="hide_content" style="border:1px solid green">This is the content we will hide</div>

<p><input type="button" value="Hide Div" onclick="$('#hide_content').hide();"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_show' title='$().show()' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_show",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__show' style='display:none'>
            <pre style='padding-left:25px'><code>
            show: function() {
                if (this.length === 0)
                    return this;
                for (var i = 0; i &lt; this.length; i++) {
                    if (this.css("display", null, this[i]) == "none") {
                        this[i].style.display = this[i].getAttribute("afmOldStyle") ? this[i].getAttribute("afmOldStyle") : 'block';
                        this[i].removeAttribute("afmOldStyle");
                    }
                }
                return this;
            },
            </code></pre>
             </div>
      </div>
          <h2>$().show()</h2>



          <section class='description'><p>Shows all the elements by setting the css display property<br />We look to see if we were retaining an old style (like table-cell) and restore that, otherwise we set it to block<br />                                $().show();<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol></ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - an appframework object</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().show() will set the elements display property to "block", thus showing the content.</p>

<p>First set up a div with the content you want to show.</p>

<pre><code class="language-html"><span class='linenumber'>&lt;div id="show_content" style="border:1px solid green;display:none;"&gt;</span>
<span class='linenumber'>  Hello --  I am some content</span>
<span class='linenumber'>&lt;/div&gt;</span>
</code></pre>

<p>Then perfom some function to show the div</p>

<pre><code class="language-js"><span class='linenumber'>$("#show_content").show();</span>
</code></pre>

<p></br></p>

<div id="show_content" style="border:1px solid green;display:none;">Hello -- I am some content</div>

<p><input type="button" value="Show Div" onclick="$('#show_content').show();"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_toggle' title='$().toggle([show])' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_toggle",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__toggle' style='display:none'>
            <pre style='padding-left:25px'><code>
            toggle: function(show) {
                if(this.length === 0)
                    return this;
                var show2 = !!(show === true);
                for (var i = 0; i &lt; this.length; i++) {
                    if (this.css("display", null, this[i]) != "none" && (show == nundefined || show2 === false)) {
                        this[i].setAttribute("afmOldStyle", this.css("display", null, this[i]));
                        this[i].style.display = "none";
                    } else if (this.css("display", null, this[i]) == "none" && (show == nundefined || show2 === true)) {
                        this[i].style.display = this[i].getAttribute("afmOldStyle") ? this[i].getAttribute("afmOldStyle") : 'block';
                        this[i].removeAttribute("afmOldStyle");
                    }
                }
                return this;
            },
            </code></pre>
             </div>
      </div>
          <h2>$().toggle([show])</h2>



          <section class='description'><p>Toggle the visibility of a div<br />                                $().toggle();<br />                $().toggle(true); //force showing<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>[show] - Boolean</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - an appframework object</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().toggle() will toggle the visibility of a div.  If the div is currently visible, it will be hidden.  If the div is currently hidden, it will be shown.    Using $().toggle(true) will force showing the div.</p>

<p>Consider the following div which is shown initially.</p>

<pre><code class="language-html"><span class='linenumber'>&lt;div id="toggle_content" style="border:1px solid green;display:block;"&gt;</span>
<span class='linenumber'>    This is some content</span>
<span class='linenumber'>&lt;/div&gt;</span>
</code></pre>

<p>Use toggle to switch the visibility to hide, then show again.</p>

<pre><code class="language-js"><span class='linenumber'>$("#toggle_content").toggle();</span>
</code></pre>

<p></br></p>

<div id="toggle_content" style="border:1px solid green;display:block;">This is some content</div>

<p><input type="button" value="Toggle Div" onclick="$('#toggle_content').toggle();"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_val' title='$().val([value])' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_val",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__val' style='display:none'>
            <pre style='padding-left:25px'><code>
            val: function(value) {
                if (this.length === 0)
                    return (value === nundefined) ? undefined : this;
                if (value == nundefined)
                    return this[0].value;
                for (var i = 0; i &lt; this.length; i++) {
                    this[i].value = value;
                }
                return this;
            },
            </code></pre>
             </div>
      </div>
          <h2>$().val([value])</h2>



          <section class='description'><p>Gets or sets an elements value<br />If used as a getter, we return the first elements value.  If nothing is in the collection, we return undefined<br />                                $().value; //Gets the first elements value;<br />                $().value="bar"; //Sets all elements value to bar<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>[value] - String</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>String|Object - A string as a getter, appframework object as a setter</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().val([value]) gets or sets the value of an HTML element.</p>

<p>Provide a method for a user to set a value,</p>

<pre><code class="language-html"><span class='linenumber'>&lt;input type="text" id="value_input" size=15&gt;</span>
</code></pre>

<p>Then use $().val to get the value that was input and show it in an alert.</p>

<pre><code class="language-js"><span class='linenumber'>alert($("#value_input").val());</span>
</code></pre>

<p>Or you can set a default value within your code</p>

<pre><code class="language-js"><span class='linenumber'>$("#value_input").val("Default Value");</span>
</code></pre>

<p><input type="text" id="value_input" size=15></br><br />
<input type="button" value="Get Value" onclick='alert($("#value_input").val());'><br />
<input type="button" value="Set Value" onclick='($("#value_input").val("Default Value"));'></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_attr' title='$().attr(attribute,[value])' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_attr",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__attr' style='display:none'>
            <pre style='padding-left:25px'><code>
            attr: function(attr, value) {
                if (this.length === 0)
                    return (value === nundefined) ? undefined : this;
                if (value === nundefined && !$.isObject(attr)) {
                    var val = (this[0].afmCacheId && _attrCache[this[0].afmCacheId][attr]) ? (this[0].afmCacheId && _attrCache[this[0].afmCacheId][attr]) : this[0].getAttribute(attr);
                    return val;
                }
                for (var i = 0; i &lt; this.length; i++) {
                    if ($.isObject(attr)) {
                        for (var key in attr) {
                            $(this[i]).attr(key, attr[key]);
                        }
                    } else if ($.isArray(value) || $.isObject(value) || $.isFunction(value)) {

                        if (!this[i].afmCacheId)
                            this[i].afmCacheId = $.uuid();

                        if (!_attrCache[this[i].afmCacheId])
                            _attrCache[this[i].afmCacheId] = {};
                        _attrCache[this[i].afmCacheId][attr] = value;
                    } else if (value === null) {
                        this[i].removeAttribute(attr);
                        if (this[i].afmCacheId && _attrCache[this[i].afmCacheId][attr])
                            delete _attrCache[this[i].afmCacheId][attr];
                    } else {
                        this[i].setAttribute(attr, value);
                    }
                }
                return this;
            },
            </code></pre>
             </div>
      </div>
          <h2>$().attr(attribute,[value])</h2>



          <section class='description'><p>Gets or sets an attribute on an element<br />If used as a getter, we return the first elements value.  If nothing is in the collection, we return undefined<br />                                $().attr("foo"); //Gets the first elements 'foo' attribute<br />                $().attr("foo","bar");//Sets the elements 'foo' attribute to 'bar'<br />                $().attr("foo",{bar:'bar'}) //Adds the object to an internal cache<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>attribute - String|Object</li>
<li style='padding-left:15px;line-height:20px'>[value] - String|Array|Object|function</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>String|Object|Array|Function - If used as a getter, return the attribute value. If a setter, return an appframework object</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().attr(attribute,[value]) gets or sets an attribute of an HTML element.</p>

<p>Assume we set a default attribute value of an element to "foo"</p>

<pre><code class="language-html"><span class='linenumber'>&lt;div id="attr_content" test_attr="foo"&gt;&lt;/div&gt;</span>
</code></pre>

<p>We then use $().attr along with the attribute name to get the value and show it in an alert.</p>

<pre><code class="language-js"><span class='linenumber'>alert($("#attr_content").attr("test_attr"));</span>
</code></pre>

<p>The attribute can then be modified by assigning a new value of "bar" to the attribute</p>

<pre><code class="language-js"><span class='linenumber'>$("#attr_content").attr("test_attr","bar");</span>
</code></pre>

<p></br></p>

<div id="attr_content" test_attr="foo">The test attribute is initially set to "foo"</div>

<p><input type="button" value="Get Attribute" onclick='alert($("#attr_content").attr("test_attr"));'><br />
<input type="button" value="Set Attribute" onclick='$("#attr_content").attr("test_attr","bar");'></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_removeAttr' title='$().removeAttr(attribute)' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_removeAttr",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__removeAttr' style='display:none'>
            <pre style='padding-left:25px'><code>
            removeAttr: function(attr) {
                var that = this;
                for (var i = 0; i &lt; this.length; i++) {
                    attr.split(/\s+/g).forEach(function(param) {
                        that[i].removeAttribute(param);
                        if (that[i].afmCacheId && _attrCache[that[i].afmCacheId][attr])
                            delete _attrCache[that[i].afmCacheId][attr];
                    });
                }
                return this;
            },
            </code></pre>
             </div>
      </div>
          <h2>$().removeAttr(attribute)</h2>



          <section class='description'><p>Removes an attribute on the elements<br />                                $().removeAttr("foo");<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>attributes - String</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - appframework object</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().removeAttr(attribute) removes an attribute of an HTML element.</p>

<p>Assume we set a default attribute value of an element to "foo"</p>

<pre><code class="language-html"><span class='linenumber'>&lt;div id="removeattr_content" test_attr="foo"&gt;&lt;/div&gt;</span>
</code></pre>

<p>We then use $().attr along with the attribute name to get the value and show it in an alert.</p>

<pre><code class="language-js"><span class='linenumber'>alert($("#removeattr_content").attr("test_attr"));</span>
</code></pre>

<p>The attribute can then be removed by using $().removeAttribute() and specifying the attribute name</p>

<pre><code class="language-js"><span class='linenumber'>$("#removeattr_content").removeAttr("test_attr");</span>
</code></pre>

<p></br></p>

<div id="removeattr_content" test_attr="foo">The test_attr attribute is set to "foo"</div>

<p><input type="button" value="Get Attribute" onclick='alert($("#removeattr_content").attr("test_attr"));'><br />
<input type="button" value="Remove Attribute" onclick='$("#removeattr_content").removeAttr("test_attr");'></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_prop' title='$().prop(property,[value])' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_prop",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__prop' style='display:none'>
            <pre style='padding-left:25px'><code>
            prop: function(prop, value) {
                if (this.length === 0)
                    return (value === nundefined) ? undefined : this;
                if (value === nundefined && !$.isObject(prop)) {
                    var res;
                    var val = (this[0].afmCacheId && _propCache[this[0].afmCacheId][prop]) ? (this[0].afmCacheId && _propCache[this[0].afmCacheId][prop]) : !(res = this[0][prop]) && prop in this[0] ? this[0][prop] : res;
                    return val;
                }
                for (var i = 0; i &lt; this.length; i++) {
                    if ($.isObject(prop)) {
                        for (var key in prop) {
                            $(this[i]).prop(key, prop[key]);
                        }
                    } else if ($.isArray(value) || $.isObject(value) || $.isFunction(value)) {

                        if (!this[i].afmCacheId)
                            this[i].afmCacheId = $.uuid();

                        if (!_propCache[this[i].afmCacheId])
                            _propCache[this[i].afmCacheId] = {};
                        _propCache[this[i].afmCacheId][prop] = value;
                    } else if (value === null && value !== undefined) {
                        $(this[i]).removeProp(prop);
                    } else {
                        this[i][prop] = value;
                    }
                }
                return this;
            },
            </code></pre>
             </div>
      </div>
          <h2>$().prop(property,[value])</h2>



          <section class='description'><p>Gets or sets a property on an element<br />If used as a getter, we return the first elements value.  If nothing is in the collection, we return undefined<br />                                $().prop("foo"); //Gets the first elements 'foo' property<br />                $().prop("foo","bar");//Sets the elements 'foo' property to 'bar'<br />                $().prop("foo",{bar:'bar'}) //Adds the object to an internal cache<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>property - String|Object</li>
<li style='padding-left:15px;line-height:20px'>[value] - String|Array|Object|function</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>String|Object|Array|Function - If used as a getter, return the property value. If a setter, return an appframework object</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().prop(property,[value]) gets or sets a property of an HTML element.</p>

<p>First set up an element</p>

<pre><code class="language-html"><span class='linenumber'>&lt;div id="property_content"&gt;&lt;/div&gt;</span>
</code></pre>

<p>Then set a property value by specifying a property name and value of "hello"</p>

<pre><code class="language-js"><span class='linenumber'>$("#property_content").prop("test_prop","hello");</span>
</code></pre>

<p>We then use $().prop along with the property name to get the value and show it in an alert.  If you attempt to get the value before it is assigned,  we return undefined.</p>

<pre><code class="language-js"><span class='linenumber'>alert($("#property_content").prop("test_prop"));</span>
</code></pre>

<p></br></p>

<div id="property_content"></div>

<p><input type="button" value="Set Property" onclick='$("#property_content").prop("test_prop","hello");'><br />
<input type="button" value="Get Property" onclick='alert($("#property_content").prop("test_prop"));'></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_removeProp' title='$().removeProp(attribute)' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_removeProp",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__removeProp' style='display:none'>
            <pre style='padding-left:25px'><code>
            removeProp: function(prop) {
                var that = this;
                for (var i = 0; i &lt; this.length; i++) {
                    prop.split(/\s+/g).forEach(function(param) {
                        if (that[i][param])
                            that[i][param] = undefined;
                        if (that[i].afmCacheId && _propCache[that[i].afmCacheId][prop]) {
                            delete _propCache[that[i].afmCacheId][prop];
                        }
                    });
                }
                return this;
            },
            </code></pre>
             </div>
      </div>
          <h2>$().removeProp(attribute)</h2>



          <section class='description'><p>Removes a property on the elements<br />                                $().removeProp("foo");<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>properties - String</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - appframework object</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().removeProp(property) removes a property of an HTML element.</p>

<p>First set up an element</p>

<pre><code class="language-html"><span class='linenumber'>&lt;div id="property_content"&gt;&lt;/div&gt;</span>
</code></pre>

<p>Then set a property with a value of "hello"</p>

<pre><code class="language-js"><span class='linenumber'>$("#property_content").prop("test_prop","hello");</span>
</code></pre>

<p>Later you can use $().removeProp using the property name to remove the property from the element.</p>

<pre><code class="language-js"><span class='linenumber'>$("#property_content").removeProp("test_prop");</span>
</code></pre>

<p></br></p>

<div id="property_content"></div>

<p><input type="button" value="Set Property" onclick='$("#property_content").prop("test_prop","hello");'><br />
<input type="button" value="Get Property" onclick='alert($("#property_content").prop("test_prop"));'><br />
<input type="button" value="Remove Property" onclick='$("#property_content").removeProp("test_prop");'></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_remove' title='$().remove(selector)' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_remove",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__remove' style='display:none'>
            <pre style='padding-left:25px'><code>
            remove: function(selector) {
                var elems = $(this).filter(selector);
                if (elems == nundefined)
                    return this;
                for (var i = 0; i &lt; elems.length; i++) {
                    $.cleanUpContent(elems[i], true, true);
                    if (elems[i] && elems[i].parentNode) {
                        elems[i].parentNode.removeChild(elems[i]);
                    }
                }
                return this;
            },
            </code></pre>
             </div>
      </div>
          <h2>$().remove(selector)</h2>



          <section class='description'><p>Removes elements based off a selector<br />                ```<br />                $().remove();  //Remove all<br />                $().remove(".foo");//Remove off a string selector<br />                var element=$("#foo").get(0);<br />                $().remove(element); //Remove by an element<br />                $().remove($(".foo"));  //Remove by a collection</p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>selector - String|Object|Array</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - appframework object</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().remove(selector) removes elements based off a selector</p>

<p>Assume we have an element that displays some content</p>

<pre><code class="language-html"><span class='linenumber'>&lt;div id="some_content" style="border:1px solid green"&gt;This is content that will be removed from the DOM.&lt;/div&gt;</span>
</code></pre>

<p>We then use $().remove() to remove the element from the DOM</p>

<pre><code class="language-js"><span class='linenumber'>$("#some_content").remove();</span>
</code></pre>

<p></br></p>

<div id="some_content" style="border:1px solid green">This is content that will be removed from the DOM.</div>

<p></br><br />
<input type="button" value="Remove Element" onclick='$("#some_content").remove();'></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_addClass' title='$().addClass(name)' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_addClass",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__addClass' style='display:none'>
            <pre style='padding-left:25px'><code>
            addClass: function(name) {
                if (name == nundefined) return this;
                for (var i = 0; i &lt; this.length; i++) {
                    var cls = this[i].className;
                    var classList = [];
                    var that = this;
                    name.split(/\s+/g).forEach(function(cname) {
                        if (!that.hasClass(cname, that[i]))
                            classList.push(cname);
                    });

                    this[i].className += (cls ? " " : "") + classList.join(" ");
                    this[i].className = this[i].className.trim();
                }
                return this;
            },
            </code></pre>
             </div>
      </div>
          <h2>$().addClass(name)</h2>



          <section class='description'><p>Adds a css class to elements.<br />                                $().addClass("selected");<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>classes - String</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - appframework object</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().addClass(name) adds a css class to the element.</p>

<p>Assume there is an element that displays some content</p>

<pre><code class="language-html"><span class='linenumber'>&lt;div style='border:1px solid black' id="cssclass_content"&gt;This is some content&lt;/div&gt;</span>
</code></pre>

<p>Then using $().addClass() we can apply the css defined as by greenredclass to that element.</p>

<pre><code class="language-js"><span class='linenumber'>$("#cssclass_content").addClass("greenredclass");</span>
</code></pre>

<p></br></p>

<div style='border:1px solid black' id="cssclass_content">This is some content</div>

<p><input type="button" value="Add a Class" onclick='$("#cssclass_content").addClass("greenredclass");'></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_removeClass' title='$().removeClass(name)' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_removeClass",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__removeClass' style='display:none'>
            <pre style='padding-left:25px'><code>
            removeClass: function(name) {
                if (name == nundefined) return this;
                for (var i = 0; i &lt; this.length; i++) {
                    if (name == nundefined) {
                        this[i].className = '';
                        return this;
                    }
                    var classList = this[i].className;
					//SGV LINK EVENT
					if (typeof this[i].className == "object") {
						classList = " ";
					}
                    name.split(/\s+/g).forEach(function(cname) {
                        classList = classList.replace(classRE(cname), " ");
                    });
                    if (classList.length &gt; 0)
                        this[i].className = classList.trim();
                    else
                        this[i].className = "";
                }
                return this;
            },
            </code></pre>
             </div>
      </div>
          <h2>$().removeClass(name)</h2>



          <section class='description'><p>Removes a css class from elements.<br />                                $().removeClass("foo"); //single class<br />                $().removeClass("foo selected");//remove multiple classess<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>classes - String</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - appframework object</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().removeClass(name) will remove a css class from an element.</p>

<p>Assume there is an element that displays some content usinge the "greenredclass" css class</p>

<pre><code class="language-html"><span class='linenumber'>&lt;div style='border:1px solid black' id="removeclass_content" class="greenredclass"&gt;This is some content&lt;/div&gt;</span>
</code></pre>

<p>Then using $().removeClass() we can remove the css class defined as by greenredclass to that element.</p>

<pre><code class="language-js"><span class='linenumber'>$("#removeclass_content").removeClass("greenredclass");</span>
</code></pre>

<p></br></p>

<div style='border:1px solid black' id="removeclass_content" class="greenredclass">This is some content</div>

<p><input type="button" value="Remove the Class" onclick='$("#removeclass_content").removeClass("greenredclass");'></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_toggleClass' title='$().toggleClass(name)' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_toggleClass",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__toggleClass' style='display:none'>
            <pre style='padding-left:25px'><code>
            toggleClass: function(name, state) {
                if (name == nundefined) return this;
                for (var i = 0; i &lt; this.length; i++) {
                    if (typeof state != "boolean") {
                        state = this.hasClass(name, this[i]);
                    }
                    $(this[i])[state ? 'removeClass' : 'addClass'](name);
                }
                return this;
            },
            </code></pre>
             </div>
      </div>
          <h2>$().toggleClass(name)</h2>



          <section class='description'><p>Adds or removes a css class to elements.<br />                                $().toggleClass("selected");<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>classes - String</li>
<li style='padding-left:15px;line-height:20px'>[state] - Boolean</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - appframework object</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              
              </div>
             </div>
          </article>
       </div>

       <div id='_replaceClass' title='$().replaceClass(old, new)' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_replaceClass",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__replaceClass' style='display:none'>
            <pre style='padding-left:25px'><code>
            replaceClass: function(name, newName) {
                if (name == nundefined || newName == nundefined) return this;
                for (var i = 0; i &lt; this.length; i++) {
                    if (name == nundefined) {
                        this[i].className = newName;
                        continue;
                    }
                    var classList = this[i].className;
                    name.split(/\s+/g).concat(newName.split(/\s+/g)).forEach(function(cname) {
                        classList = classList.replace(classRE(cname), " ");
                    });
                    classList = classList.trim();
                    if (classList.length &gt; 0) {
                        this[i].className = (classList + " " + newName).trim();
                    } else
                        this[i].className = newName;
                }
                return this;
            },
            </code></pre>
             </div>
      </div>
          <h2>$().replaceClass(old, new)</h2>



          <section class='description'><p>Replaces a css class on elements.<br />                                $().replaceClass("on", "off");<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>classes - String</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - appframework object</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().replaceClass(old,new) will replace a css class on an element with another class.</p>

<p>Assume there is an element that displays some content usinge the "greenredclass" css class</p>

<pre><code class="language-html"><span class='linenumber'>&lt;div style='border:1px solid black' id="replaceclass_content" class="greenredclass"&gt;This is some content&lt;/div&gt;</span>
</code></pre>

<p>Then using $().replaceClass() you can replace the greenredclass with the blueyellowclass.</p>

<pre><code class="language-js"><span class='linenumber'>$("#replaceclass_content").replaceClass("greenredclass","blueyellowclass");</span>
</code></pre>

<p></br></p>

<div style='border:1px solid black' id="replaceclass_content" class="greenredclass">This is some content</div>

<p><input type="button" value="Replace the Class" onclick='$("#replaceclass_content").replaceClass("greenredclass","blueyellowclass");'></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_hasClass' title='$().hasClass(name,[element])' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_hasClass",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__hasClass' style='display:none'>
            <pre style='padding-left:25px'><code>
            hasClass: function(name, element) {
                if (this.length === 0)
                    return false;
                if (!element)
                    element = this[0];
                return classRE(name).test(element.className);
            },
            </code></pre>
             </div>
      </div>
          <h2>$().hasClass(name,[element])</h2>



          <section class='description'><p>Checks to see if an element has a class.<br />                                $().hasClass('foo');<br />                $().hasClass('foo',element);<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>class - String</li>
<li style='padding-left:15px;line-height:20px'>[element] - Object</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Boolean - </div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().hasClass(name) checks to see if an element has a class.</p>

<p>Assume there is an element that displays some content usinge the "greenredclass" css class</p>

<pre><code class="language-html"><span class='linenumber'>&lt;div style='border:1px solid black' id="hasclass_content" class="greenredclass"&gt;This is some content&lt;/div&gt;</span>
</code></pre>

<p>You can then use $().hasClass() to determine if the element has that class or not.</p>

<pre><code class="language-js"><span class='linenumber'>$("#hasclass_content").hasClass("greenredclass");</span>
</code></pre>

<p></br></p>

<div style='border:1px solid black' id="hasclass_content" class="greenredclass">This is some content</div>

<p><input type="button" value="Has greenredclass?" onclick='alert($("#hasclass_content").hasClass("greenredclass"))'><br />
<input type="button" value="Has blueyellowclass?" onclick='alert($("#hasclass_content").hasClass("blueyellowclass"))'></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_append' title='$().append(element,[insert])' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_append",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__append' style='display:none'>
            <pre style='padding-left:25px'><code>
            append: function(element, insert) {
                if (element && element.length != nundefined && element.length === 0)
                    return this;
                if ($.isArray(element) || $.isObject(element))
                    element = $(element);
                var i;


                for (i = 0; i &lt; this.length; i++) {
                    if (element.length && typeof element != "string") {
                        element = $(element);
                        _insertFragments(element, this[i], insert);
                    } else {
                        var obj = fragmentRE.test(element) ? $(element) : undefined;                        
                        if (obj == nundefined || obj.length === 0) {
                            obj = document.createTextNode(element);
                        }
                        if (obj.nodeName != nundefined && obj.nodeName.toLowerCase() == "script" && (!obj.type || obj.type.toLowerCase() === 'text/javascript')) {
                            window['eval'](obj.innerHTML);
                        } else if (obj instanceof $afm) {
                            _insertFragments(obj, this[i], insert);
                        } else {
                            insert != nundefined ? this[i].insertBefore(obj, this[i].firstChild) : this[i].appendChild(obj);
                        }
                    }
                }
                return this;
            },
            </code></pre>
             </div>
      </div>
          <h2>$().append(element,[insert])</h2>



          <section class='description'><p>Appends to the elements<br />We boil everything down to an appframework object and then loop through that.<br />If it's HTML, we create a dom element so we do not break event bindings.<br />if it's a script tag, we evaluate it.<br />                                $().append(""); //Creates the object from the string and appends it<br />                $().append($("#foo")); //Append an object;<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>Element/string - String|Object</li>
<li style='padding-left:15px;line-height:20px'>[insert] - Boolean</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - appframework object</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().append(element,[insert]) appends an element or content to an existing element.</p>

<p>Assume we have an element defined with content for which we want to add additional content</p>

<pre><code class="language-html"><span class='linenumber'>&lt;div id="append_content"&gt;I'll append content after the &amp;lt;hr&gt; &lt;hr&gt;&lt;/div&gt;</span>
</code></pre>

<p>We then use $().append() to add the additional content after the &lt;hr> tag .</p>

<pre><code class="language-js"><span class='linenumber'>$("#append_content").append("&lt;span&gt;Some more content&lt;/br&gt;&lt;/span&gt;");</span>
</code></pre>

<p></br></p>

<div id="append_content">I'll append content after the &lt;hr> <hr></div>

<p><input type="button" value="Append Content" onclick='$("#append_content").append("<span>Some more content</br></span>");'></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_appendTo' title='$().appendTo(element,[insert])' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_appendTo",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__appendTo' style='display:none'>
            <pre style='padding-left:25px'><code>
            appendTo: function(selector, insert) {
                var tmp = $(selector);
                tmp.append(this);
                return this;
            },
            </code></pre>
             </div>
      </div>
          <h2>$().appendTo(element,[insert])</h2>



          <section class='description'><p>Appends the current collection to the selector<br />                                $().appendTo("#foo"); //Append an object;<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>Selector - String|Object</li>
<li style='padding-left:15px;line-height:20px'>[insert] - Boolean</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().appendTo(element|selector) appends  the collection to an element</p>

<p>Assume we have found all the paragraphcs on the page and want to move them into another div</p>

<pre><code class="language-js"><span class='linenumber'>var paragraphs=$("p");</span>
</code></pre>

<p>Now let's put them in a div with the id called "paragraphs".  The will move to the dop</p>

<pre><code class="language-js"><span class='linenumber'>$("#appendTest p").appendTo("#paragraphsappend");</span>
</code></pre>

<pre><code class="language-html"><span class='linenumber'>&lt;div id="paragraphsappend"&gt;</span>
<span class='linenumber'>   This content will stay at the bottom when the &lt;p&gt; tags are moved</span>
<span class='linenumber'>&lt;/div&gt;</span>
<span class='linenumber'>&lt;div id="appendTest"&gt;</span>
<span class='linenumber'>    &lt;p&gt;Paragraph One&lt;/p&gt;</span>
<span class='linenumber'>    &lt;p&gt;Paragraph Two&lt;/p&gt;</span>
<span class='linenumber'>&lt;/div&gt;</span>
</code></pre>

<div id="appendTest">
    <p>Paragraph One</p>
    <p>Paragraph Two</p>
</div>

<div id="paragraphsappend">
    <div>This content will stay at the top when the &lt;p> tags are moved</div>
</div>

<p><input type="button" value="Append Content" onclick='$("#appendTest p").appendTo("#paragraphsappend");'></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_prependTo' title='$().prependTo(element)' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_prependTo",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__prependTo' style='display:none'>
            <pre style='padding-left:25px'><code>
            prependTo: function(selector) {
                var tmp = $(selector);
                tmp.append(this, true);
                return this;
            },
            </code></pre>
             </div>
      </div>
          <h2>$().prependTo(element)</h2>



          <section class='description'><p>Prepends the current collection to the selector<br />                                $().prependTo("#foo"); //Prepend an object;<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>Selector - String|Object</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().prependTo(element|selector) prepends  the collection to an element</p>

<p>Assume we have found all the paragraphcs on the page and want to move them into another div</p>

<pre><code class="language-js"><span class='linenumber'>var paragraphs=$("p");</span>
</code></pre>

<p>Now let's put them in a div with the id called "paragraphs".  The will move to the dop</p>

<pre><code class="language-js"><span class='linenumber'>$("#prependTest p").prependTo("#paragraphsPrepend");</span>
</code></pre>

<pre><code class="language-html"><span class='linenumber'>&lt;div id="paragraphsPrepend"&gt;</span>
<span class='linenumber'>   This content will stay at the bottom when the &lt;p&gt; tags are moved</span>
<span class='linenumber'>&lt;/div&gt;</span>
<span class='linenumber'>&lt;div id="prependTest"&gt;</span>
<span class='linenumber'>    &lt;p&gt;Paragraph One&lt;/p&gt;</span>
<span class='linenumber'>    &lt;p&gt;Paragraph Two&lt;/p&gt;</span>
<span class='linenumber'>&lt;/div&gt;</span>
</code></pre>

<div id="paragraphsPrepend">
    <div>This content will stay at the bottom when the &lt;p> tags are moved</div>
</div>

<div id="prependTest">
    <p>Paragraph One</p>
    <p>Paragraph Two</p>
</div>

<p><input type="button" value="Append Content" onclick='$("#prependTest p").prependTo("#paragraphsPrepend");'></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_prepend' title='$().prepend(element)' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_prepend",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__prepend' style='display:none'>
            <pre style='padding-left:25px'><code>
            prepend: function(element) {
                return this.append(element, 1);
            },
            </code></pre>
             </div>
      </div>
          <h2>$().prepend(element)</h2>



          <section class='description'><p>Prepends to the elements<br />This simply calls append and sets insert to true<br />                                $().prepend("");//Creates the object from the string and appends it<br />                $().prepend($("#foo")); //Prepends an object<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>Element/string - String|Object</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - appframework object</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().prepend(element) prepends to an element by calling append and setting insert to true.</p>

<p>Assume we have an element defined with content for which we want to add additional content</p>

<pre><code class="language-html"><span class='linenumber'>&lt;div id="prepend_content"&gt;&lt;hr&gt;I'll prepend content before the &amp;lt;hr&gt;&lt;/div&gt;</span>
</code></pre>

<p>We then use $().prepend() to add the additional content before the &lt;hr> tag .</p>

<pre><code class="language-js"><span class='linenumber'>$("#prepend_content").prepend("&lt;span&gt;Some more content&lt;br /&gt;&lt;/span&gt;");</span>
</code></pre>

<p></br></p>

<div id="prepend_content"><hr>I'll prepend content before the &lt;hr></div>

<p><input type="button" value="Prepend Content" onclick='$("#prepend_content").prepend("<span>Some more content</br></span>");'></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_insertBefore' title='$().insertBefore(target);' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_insertBefore",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__insertBefore' style='display:none'>
            <pre style='padding-left:25px'><code>
            insertBefore: function(target, after) {
                if (this.length === 0)
                    return this;
                target = $(target).get(0);
                if (!target)
                    return this;
                for (var i = 0; i &lt; this.length; i++) {
                    after ? target.parentNode.insertBefore(this[i], target.nextSibling) : target.parentNode.insertBefore(this[i], target);
                }
                return this;
            },
            </code></pre>
             </div>
      </div>
          <h2>$().insertBefore(target);</h2>



          <section class='description'><p>Inserts collection before the target (adjacent)<br />                                $().insertBefore(af("#target"));<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>Target - String|Object</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().insertBefore(element) Inserts a collection before the element in the dom.</p>

<p>Let's say we want to move all paragraphs before an element with id ="insertBeforeTest"</p>

<pre><code class="language-html"><span class='linenumber'>&lt;div&gt;Some stuff&lt;/div&gt;</span>
<span class='linenumber'>&lt;div id="insertBeforeTest"&gt;P's will go before me&lt;/div&gt;</span>
<span class='linenumber'>&lt;p&gt;This is p1&lt;/p&gt;</span>
<span class='linenumber'>&lt;p&gt;This is p2&lt;/p&gt;</span>
</code></pre>

<p>We can find all the p tags, then insert before #insertBeforeTest</p>

<pre><code class="language-js"><span class='linenumber'>$("p").insertBefore("#insertBeforeTest");</span>
</code></pre>

<p></br></p>

<div id="insertBeforeW">
    <div>Some stuff</div>
    <div id="insertBeforeTest">P's will go before me</div>
    <p>This is p1</p>
    <p>This is p2</p>
</div>

<p><input type="button" value="Append Content" onclick='$("#insertBeforeW p").insertBefore("#insertBeforeTest");'></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_insertAfter' title='$().insertAfter(target);' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_insertAfter",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__insertAfter' style='display:none'>
            <pre style='padding-left:25px'><code>
            insertAfter: function(target) {
                this.insertBefore(target, true);
            },
            </code></pre>
             </div>
      </div>
          <h2>$().insertAfter(target);</h2>



          <section class='description'><p>Inserts collection after the target (adjacent)<br />                                $().insertAfter(af("#target"));<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>target - String|Object</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().insertAfter(element) Inserts a collection after the element in the dom.</p>

<p>Let's say we want to move all paragraphs after an element with id ="insertBeforeTest"</p>

<pre><code class="language-html"><span class='linenumber'>&lt;p&gt;This is p1&lt;/p&gt;</span>
<span class='linenumber'>&lt;p&gt;This is p2&lt;/p&gt;</span>
<span class='linenumber'>&lt;div id="insertAfterTest"&gt;P's will go after me&lt;/div&gt;</span>
<span class='linenumber'>&lt;div&gt;Some stuff&lt;/div&gt;</span>
</code></pre>

<p>We can find all the p tags, then insert after #insertAfterTest</p>

<pre><code class="language-js"><span class='linenumber'>$("p").insertAfter("#insertAfterTest");</span>
</code></pre>

<p></br></p>

<div id="insertAfterW">
     <p>This is p1</p>
    <p>This is p2</p>
    <div id="insertAfterTest">P's will go after me</div>
   <div>Some stuff</div>
</div>

<p><input type="button" value="Append Content" onclick='$("#insertAfterW p").insertAfter("#insertAfterTest");'></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_get' title='$().get([index])' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_get",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__get' style='display:none'>
            <pre style='padding-left:25px'><code>
            get: function(index) {
                index = index == nundefined ? 0 : index;
                if (index &lt; 0)
                    index += this.length;
                return (this[index]) ? this[index] : undefined;
            },
            </code></pre>
             </div>
      </div>
          <h2>$().get([index])</h2>



          <section class='description'><p>Returns the raw DOM element.<br />                                $().get(0); //returns the first element<br />                $().get(2);// returns the third element<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>[index] - Int</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - raw DOM element</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().get([index]) to get the raw DOM element</p>

<p>Write a function that uses $().get(0) to get the first element</p>

<pre><code class="language-js"><span class='linenumber'>function getElementByIndex(){</span>
<span class='linenumber'>    var obj=$(".panel").get(0);</span>
<span class='linenumber'>    alert("This is the first panel = "+obj.id);</span>
<span class='linenumber'>}</span>
</code></pre>

<p>You can then set up a way to call the function, in this case we set up a button</p>

<p></br></p>

<script>
    function getElementByIndex(){
        var obj=$(".panel").get(0);
        alert("This is the first panel = "+obj.id);
    }
</script>

<p><input type="button" value="Get First Panel" onclick='getElementByIndex();;'></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_offset' title='$().offset()' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_offset",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__offset' style='display:none'>
            <pre style='padding-left:25px'><code>
            offset: function() {
                var obj;
                if (this.length === 0)
                    return this;
                if (this[0] == window)
                    return {
                        left: 0,
                        top: 0,
                        right: 0,
                        bottom: 0,
                        width: window.innerWidth,
                        height: window.innerHeight
                };
                else
                    obj = this[0].getBoundingClientRect();
                return {
                    left: obj.left + window.pageXOffset,
                    top: obj.top + window.pageYOffset,
                    right: obj.right + window.pageXOffset,
                    bottom: obj.bottom + window.pageYOffset,
                    width: obj.right - obj.left,
                    height: obj.bottom - obj.top
                };
            },
            </code></pre>
             </div>
      </div>
          <h2>$().offset()</h2>



          <section class='description'><p>Returns the offset of the element, including traversing up the tree<br />                                $().offset();<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol></ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - with left, top, width and height properties</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().offset() returns the offset of the first element in the collection</p>

<p>The offset returns the following</p>

<ol>
    <li>left</li>
    <li>top</li>
    <li>right</li>
    <li>bottom</li>
    <li>width</li>
    <li>height</li>
</ol>

<p>Below we have a box absolutely positioned in the div.</p>

<pre><code class="language-html"><span class='linenumber'>&lt;div id="offsetTest" style="position:absolute;background:red;width:100px;height:100px;left:100px;top:100px;"&gt;</span>
<span class='linenumber'>    This is content</span>
<span class='linenumber'>&lt;/div&gt;</span>
</code></pre>

<p>Now we will get the offset</p>

<pre><code class="language-js"><span class='linenumber'>$("#offsetTest").offset();</span>
</code></pre>

<p></br><br />
<input type="button" value="Get Offset" onclick='alert(JSON.stringify($("#offsetTest").offset()))'></p>

<div style="position:relative;width:100%;height:300px;">
<div id="offsetTest" style="position:absolute;background:red;width:100px;height:100px;right:100px;top:-50px;">
    This is content
</div>
</div>

              </div>
             </div>
          </article>
       </div>

       <div id='_height' title='$().height()' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_height",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__height' style='display:none'>
            <pre style='padding-left:25px'><code>
            height: function(val) {
                if (this.length === 0)
                    return this;
                if (val != nundefined)
                    return this.css("height", val);
                if (this[0] == this[0].window)
                    return window.innerHeight;
                if (this[0].nodeType == this[0].DOCUMENT_NODE)
                    return this[0].documentElement.offsetheight;
                else {
                    var tmpVal = this.css("height").replace("px", "");
                    if (tmpVal)
                        return tmpVal;
                    else
                        return this.offset().height;
                }
            },
            </code></pre>
             </div>
      </div>
          <h2>$().height()</h2>



          <section class='description'><p>returns the height of the element, including padding on IE<br />                              $().height();<br />               </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol></ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>string - height</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().height() returns the css height of the element based.  The "px" is stripped from the result.</p>

<p>Below we have to divs.  One has a fixed height, and the other is based off %</p>

<pre><code class="language-html"><span class='linenumber'>&lt;div id="heightTest" style="background:red;height:100px;height:100px;"&gt;</span>
<span class='linenumber'>    This is content</span>
<span class='linenumber'>&lt;/div&gt;</span>
<span class='linenumber'>&lt;div id="heightTest2" style="background:green;height:100%;height:30%;"&gt;</span>
<span class='linenumber'>    This is content 2</span>
<span class='linenumber'>&lt;/div&gt;</span>
</code></pre>

<p>Now we will get the offset</p>

<pre><code class="language-js"><span class='linenumber'>$("#heightTest").height();</span>
</code></pre>

<p></br><br />
<input type="button" value="height test 1" onclick='alert($("#heightTest").height())'><br />
<input type="button" value="height test 2" onclick='alert($("#heightTest2").height())'></p>

<div id="heightTest" style=";background:red;height:100px;height:100px;">
    This is content
</div>

<div id="heightTest2" style=";background:green;height:100%;height:30%;">
    This is content 2
</div>

              </div>
             </div>
          </article>
       </div>

       <div id='_width' title='$().width()' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_width",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__width' style='display:none'>
            <pre style='padding-left:25px'><code>
            width: function(val) {
                if (this.length === 0)
                    return this;
                if (val != nundefined)
                    return this.css("width", val);
                if (this[0] == this[0].window)
                    return window.innerWidth;
                if (this[0].nodeType == this[0].DOCUMENT_NODE)
                    return this[0].documentElement.offsetwidth;
                else {
                    var tmpVal = this.css("width").replace("px", "");
                    if (tmpVal)
                        return tmpVal;
                    else
                        return this.offset().width;
                }
            },
            </code></pre>
             </div>
      </div>
          <h2>$().width()</h2>



          <section class='description'><p>returns the width of the element, including padding on IE<br />                              $().width();<br />               </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol></ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>string - width</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().width() returns the css width of the element based. The "px" is stripped from the result.</p>

<p>Below we have to divs.  One has a fixed width, and the other is based off %</p>

<pre><code class="language-html"><span class='linenumber'>&lt;div id="widthTest" style="background:red;width:100px;height:100px;"&gt;</span>
<span class='linenumber'>    This is content</span>
<span class='linenumber'>&lt;/div&gt;</span>
<span class='linenumber'>&lt;div id="widthTest2" style="background:green;width:100%;height:100px;"&gt;</span>
<span class='linenumber'>    This is content 2</span>
<span class='linenumber'>&lt;/div&gt;</span>
</code></pre>

<p>Now we will get the offset</p>

<pre><code class="language-js"><span class='linenumber'>$("#widthTest").width();</span>
</code></pre>

<p></br><br />
<input type="button" value="Width test 1" onclick='alert($("#widthTest").width())'><br />
<input type="button" value="Width test 2" onclick='alert($("#widthTest2").width())'></p>

<div id="widthTest" style=";background:red;width:100px;height:100px;">
    This is content
</div>

<div id="widthTest2" style=";background:green;width:100%;height:100px;">
    This is content 2
</div>

              </div>
             </div>
          </article>
       </div>

       <div id='_parent' title='$().parent(selector)' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_parent",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__parent' style='display:none'>
            <pre style='padding-left:25px'><code>
            parent: function(selector, recursive) {
                if (this.length === 0)
                    return this;
                var elems = [];
                for (var i = 0; i &lt; this.length; i++) {
                    var tmp = this[i];
                    while (tmp.parentNode && tmp.parentNode != document) {
                        elems.push(tmp.parentNode);
                        if (tmp.parentNode)
                            tmp = tmp.parentNode;
                        if (!recursive)
                            break;
                    }
                }
                return this.setupOld($(unique(elems)).filter(selector));
            },
            </code></pre>
             </div>
      </div>
          <h2>$().parent(selector)</h2>



          <section class='description'><p>Returns the parent nodes of the elements based off the selector<br />                                $("#foo").parent('.bar');<br />                $("#foo").parent($('.bar'));<br />                $("#foo").parent($('.bar').get(0));<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>[selector] - String|Array|Object</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - appframework object with unique parents</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().parent([selector]) returns the parents of each element in the collection, filtered by the optional selector</p>

<p>Let's look at the following html structure</p>

<pre><code class="language-html"><span class='linenumber'>&lt;div id="parent1"&gt;</span>
<span class='linenumber'>    &lt;div class="child"&gt;</span>
<span class='linenumber'>        &lt;div class="gc"&gt;GC&lt;/div&gt;</span>
<span class='linenumber'>    &lt;/div&gt;</span>
<span class='linenumber'>&lt;/div&gt;</span>
<span class='linenumber'>&lt;div id="parent2"&gt;</span>
<span class='linenumber'>    &lt;div class="child"&gt;Child&lt;/div&gt;</span>
<span class='linenumber'>&lt;/div&gt;</span>
</code></pre>

<p>Now we will get the parent elements of everything with the class "child"</p>

<pre><code class="language-js"><span class='linenumber'>$(".child").parent();</span>
</code></pre>

<div id="parent1">
    <div class="child">
        <div class="gc">GC</div>
    </div>
</div>

<div id="parent2">
    <div class="child">Child</div>
</div>

<script>
function getParent(){
    var obj=$(".child").parent();
   alert(obj[0].id+"  "+obj[1].id);
}
</script>

<p><input type="button" value="Get Parent" onclick="getParent()"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_parents' title='$().parents(selector)' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_parents",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__parents' style='display:none'>
            <pre style='padding-left:25px'><code>
            parents: function(selector) {
                return this.parent(selector, true);
            },
            </code></pre>
             </div>
      </div>
          <h2>$().parents(selector)</h2>



          <section class='description'><p>Returns the parents of the elements based off the selector (traversing up until html document)<br />                                $("#foo").parents('.bar');<br />                $("#foo").parents($('.bar'));<br />                $("#foo").parents($('.bar').get(0));<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>[selector] - String|Array|Object</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - appframework object with unique parents</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().parents([selector]) returns the parents of each element in the collection and traverses up the DOM, filtered by the optional selector</p>

<p>Let's look at the following html structure</p>

<pre><code class="language-html"><span class='linenumber'>&lt;div id="parents1"&gt;</span>
<span class='linenumber'>    &lt;div class="childs"&gt;</span>
<span class='linenumber'>        &lt;div class="gcs"&gt;GC&lt;/div&gt;</span>
<span class='linenumber'>    &lt;/div&gt;</span>
<span class='linenumber'>&lt;/div&gt;</span>
<span class='linenumber'>&lt;div id="parents2"&gt;</span>
<span class='linenumber'>    &lt;div class="childs"&gt;Child&lt;/div&gt;</span>
<span class='linenumber'>&lt;/div&gt;</span>
</code></pre>

<p>Now we will get the parent elements of everything with the class "child"</p>

<pre><code class="language-js"><span class='linenumber'>$(".child").parent();</span>
</code></pre>

<div id="parents1">
    <div class="childs">
        <div class="gcs">GC</div>
    </div>
</div>

<div id="parents2">
    <div class="childs">Child</div>
</div>

<script>
function getParents(){
    var obj=$(".childs").parents();
    var str="";
   obj.each(function(obj){
    if(this.id=="")
        return;
      str+=this.id+",";
   });
   alert(str);
}
function getParentGCs(){
    var obj=$(".gcs").parents();
    var str="";
   obj.each(function(obj){
    if(this.id=="")
        return;
      str+=this.id+",";
   });
   alert(str);
}

</script>

<p>This test will have "parents1" and "parents2" and then the shared ancestors<br />
<input type="button" value="Get .child Parent" onclick="getParents()"><br><br />
This test will not include "parent2", since gcs is a single element</p>

<p><input type="button" value="Get .gc Parent" onclick="getParentGCs()"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_children' title='$().children(selector)' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_children",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__children' style='display:none'>
            <pre style='padding-left:25px'><code>
            children: function(selector) {

                if (this.length === 0)
                    return this;
                var elems = [];
                for (var i = 0; i &lt; this.length; i++) {
                    elems = elems.concat(siblings(this[i].firstChild));
                }
                return this.setupOld($((elems)).filter(selector));

            },
            </code></pre>
             </div>
      </div>
          <h2>$().children(selector)</h2>



          <section class='description'><p>Returns the child nodes of the elements based off the selector<br />                                $("#foo").children('.bar'); //Selector<br />                $("#foo").children($('.bar')); //Objects<br />                $("#foo").children($('.bar').get(0)); //Single element<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>[selector] - String|Array|Object</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - appframework object with unique children</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().children([selector]) returns the children of each element in the collection, filtered by the optional selector</p>

<p>Let's look at the following html structure</p>

<pre><code class="language-html"><span class='linenumber'>&lt;div id="childstest1"&gt;</span>
<span class='linenumber'>    &lt;div id='childtestgc1' class="childstest"&gt;</span>
<span class='linenumber'>        &lt;div id='childtestgc3'  class="gcstest"&gt;GC&lt;/div&gt;</span>
<span class='linenumber'>    &lt;/div&gt;</span>
<span class='linenumber'>    &lt;div id='childtestgc2'  class="childstest"&gt;Child&lt;/div&gt;</span>
<span class='linenumber'>&lt;/div&gt;</span>
</code></pre>

<p>Now we will get the child elements of everything of parents</p>

<pre><code class="language-js"><span class='linenumber'>$("#childtest1").children();</span>
</code></pre>

<div id="childstest1">
    <div id='childtestgc1' class="childstest">
        <div id='childtestgc3'  class="gcstest">GC</div>
    </div>
    <div id='childtestgc2'  class="childstest">Child</div>
</div>

<script>
function getChildren(){
    var obj=$("#childstest1").children();
    var str="";
   obj.each(function(obj){
    if(this.id=="")
        return;
      str+=this.id+",";
   });
   alert(str);
}
function getChildrenGC(){
    var obj=$(".childstest").children();
    var str="";
   obj.each(function(obj){
    if(this.id=="")
        return;
      str+=this.id+",";
   });
   alert(str);
}

</script>

<p>This test will have to elements, but not include "gctest"<br />
<input type="button" value="Get childtest1 children" onclick="getChildren()"><br><br />
this will only have "gctest" since there is only one child of both childtest divs</p>

<p><input type="button" value="Get .childtest children" onclick="getChildrenGC()"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_siblings' title='$().siblings(selector)' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_siblings",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__siblings' style='display:none'>
            <pre style='padding-left:25px'><code>
            siblings: function(selector) {
                if (this.length === 0)
                    return this;
                var elems = [];
                for (var i = 0; i &lt; this.length; i++) {
                    if (this[i].parentNode)
                        elems = elems.concat(siblings(this[i].parentNode.firstChild, this[i]));
                }
                return this.setupOld($(elems).filter(selector));
            },
            </code></pre>
             </div>
      </div>
          <h2>$().siblings(selector)</h2>



          <section class='description'><p>Returns the siblings of the element based off the selector<br />                                $("#foo").siblings('.bar'); //Selector<br />                $("#foo").siblings($('.bar')); //Objects<br />                $("#foo").siblings($('.bar').get(0)); //Single element<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>[selector] - String|Array|Object</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - appframework object with unique siblings</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().siblings([selector]) returns the siblings of each element in the collection, filtered by the optional selector</p>

<p>Let's look at the following html structure</p>

<pre><code class="language-html"><span class='linenumber'>&lt;div id="siblingstest1"&gt;</span>
<span class='linenumber'>    &lt;div id='siblingtestgc1' class="siblingstest"&gt;</span>
<span class='linenumber'>        &lt;div id='siblingtestgc3'  class="siblingsgcstest"&gt;GC&lt;/div&gt;</span>
<span class='linenumber'>    &lt;/div&gt;</span>
<span class='linenumber'>    &lt;div id='siblingtestgc2'  class="siblingstest"&gt;Child&lt;/div&gt;</span>
<span class='linenumber'>    &lt;div id='siblingtestgc4'  class="siblingstest"&gt;Child&lt;/div&gt;</span>
<span class='linenumber'>&lt;/div&gt;</span>
</code></pre>

<p>Now we will get the child elements of everything of parents</p>

<pre><code class="language-js"><span class='linenumber'>$("#siblingtest1").siblings();</span>
</code></pre>

<div id="siblingstest1">
    <div id='siblingtestgc1' class="siblingstest">
        <div id='siblingtestgc3'  class="siblingsgcstest">GC</div>
    </div>
    <div id='siblingtestgc2'  class="siblingstest">Child</div>
     <div id='siblingtestgc4'  class="siblingstest">Child</div>
</div>

<script>
function getSiblings(){
    var obj=$("#siblingtestgc1").siblings();
    var str="";
   obj.each(function(obj){
    if(this.id=="")
        return;
      str+=this.id+",";
   });
   alert(str);
}
function getSiblingsGC(){
    var obj=$(".siblingsgcstest").siblings();
    var str="";
   obj.each(function(obj){
    if(this.id=="")
        return;
      str+=this.id+",";
   });
   alert(str);
}

</script>

<p>This test will have to elements, but not include "gctest"<br />
<input type="button" value="Get siblingtestgc1 siblings" onclick="getSiblings()"><br><br />
this will be empty since there are no other elements in the div</p>

<p><input type="button" value="Get .siblingsgcstest siblings" onclick="getSiblingsGC()"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_closest' title='$().closest(selector,[context]);' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_closest",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__closest' style='display:none'>
            <pre style='padding-left:25px'><code>
            closest: function(selector, context) {
                if (this.length === 0)
                    return this;
                var elems = [],
                    cur = this[0];

                var start = $(selector, context);
                if (start.length === 0)
                    return $();
                while (cur && start.indexOf(cur) == -1) {
                    cur = cur !== context && cur !== document && cur.parentNode;
                }
                return $(cur);

            },
            </code></pre>
             </div>
      </div>
          <h2>$().closest(selector,[context]);</h2>



          <section class='description'><p>Returns the closest element based off the selector and optional context<br />                                $("#foo").closest('.bar'); //Selector<br />                $("#foo").closest($('.bar')); //Objects<br />                $("#foo").closest($('.bar').get(0)); //Single element<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>selector - String|Array|Object</li>
<li style='padding-left:15px;line-height:20px'>[context] - Object</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - Returns an appframework object with the closest element based off the selector</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().closest([selector]) for each element in the collection, including itself, it will search and traverse up the dom until it finds the first element matching the selector.  If the elements in the collection match the selector, it will return those.</p>

<pre><code class="language-html"><span class='linenumber'>&lt;div id="closest1" class="grandparent"&gt;</span>
<span class='linenumber'>    &lt;div id='closestgc1' class="closest"&gt;</span>
<span class='linenumber'>        &lt;div id='closestgc3'  class="closest"&gt;GC&lt;/div&gt;</span>
<span class='linenumber'>    &lt;/div&gt;</span>
<span class='linenumber'>    &lt;div id='closestgc2'  class="closest"&gt;Child&lt;/div&gt;</span>
<span class='linenumber'>&lt;/div&gt;</span>
</code></pre>

<p>Now lets get the closest div</p>

<pre><code class="language-js"><span class='linenumber'>$("#closestgc3").closest('div');</span>
</code></pre>

<p>Or we can find the closest "grandparent" class</p>

<pre><code class="language-js"><span class='linenumber'>$(".closest").closest(".grandparent");</span>
</code></pre>

<div id="closest1" class='grandparent'>
    <div id='closestgc1' class="closest">
        <div id='closestgc3'  class="closest">GC</div>
    </div>
    <div id='closestgc2'  class="closest">Child</div>
</div>

<script>
function getclosest(){
    var obj=$("#closestgc3").closest('div');
    var str="";
   obj.each(function(obj){
    if(this.id=="")
        return;
      str+=this.id+",";
   });
   alert(str);
}
function getclosestGC(){
    var obj=$(".closest").closest(".grandparent");
    var str="";
   obj.each(function(obj){
    if(this.id=="")
        return;
      str+=this.id+",";
   });
   alert(str);
}

</script>

<p>This will be the closestgc3 div since it is a div<br />
<input type="button" value="Get #closestgc3 div" onclick="getclosest()"><br><br />
This will traverse up to .grandparent from all the .closest class divs<br />
<input type="button" value="Get .closest closest .grandparent" onclick="getclosestGC()"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_filter' title='$().filter(selector);' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_filter",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__filter' style='display:none'>
            <pre style='padding-left:25px'><code>
            filter: function(selector) {
                if (this.length === 0)
                    return this;

                if (selector == nundefined)
                    return this;
                var elems = [];
                for (var i = 0; i &lt; this.length; i++) {
                    var val = this[i];
                    if (val.parentNode && $(selector, val.parentNode).indexOf(val) &gt;= 0)
                        elems.push(val);
                }
                return this.setupOld($(unique(elems)));
            },
            </code></pre>
             </div>
      </div>
          <h2>$().filter(selector);</h2>



          <section class='description'><p>Filters elements based off the selector<br />                                $("#foo").filter('.bar'); //Selector<br />                $("#foo").filter($('.bar')); //Objects<br />                $("#foo").filter($('.bar').get(0)); //Single element<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>selector - String|Array|Object</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - Returns an appframework object after the filter was run</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().filter(selector) reduces a collection to elements that match the selector</p>

<p>Let's say we have all &lt;li> elements and we want to filter to only elements that have class "anchor"</p>

<pre><code class="language-html"><span class='linenumber'>&lt;ul&gt;</span>
<span class='linenumber'>    &lt;li class="anchor"&gt;One&lt;/li&gt;</span>
<span class='linenumber'>    &lt;li class="anchor"&gt;Two&lt;/li&gt;</span>
<span class='linenumber'>    &lt;li&gt;Three&lt;/li&gt;</span>
<span class='linenumber'>    &lt;li&gt;Four&lt;/li&gt;</span>
<span class='linenumber'>    &lt;li&gt;Five&lt;/li&gt;</span>
<span class='linenumber'>    &lt;li&gt;Six&lt;/li&gt;</span>
<span class='linenumber'>&lt;/ul&gt;</span>
</code></pre>

<p>By calling filter of ".anchor", we will reduce our set from six elements to two.</p>

<pre><code class="language-js"><span class='linenumber'>$("ul li").filter(".anchor");</span>
</code></pre>

<ul id="filterTest">
    <li class="anchor">One</li>
    <li class="anchor">Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
</ul>

<p><input type="button" value="Get All LI count" onclick="alert($('#filterTest li').length)"></p>

<p><input type="button" value="Get Filtered count" onclick="alert($('#filterTest li').filter('.anchor').length)"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_not' title='$().not(selector);' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_not",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__not' style='display:none'>
            <pre style='padding-left:25px'><code>
            not: function(selector) {
                if (this.length === 0)
                    return this;
                var elems = [];
                for (var i = 0; i &lt; this.length; i++) {
                    var val = this[i];
                    if (val.parentNode && $(selector, val.parentNode).indexOf(val) == -1)
                        elems.push(val);
                }
                return this.setupOld($(unique(elems)));
            },
            </code></pre>
             </div>
      </div>
          <h2>$().not(selector);</h2>



          <section class='description'><p>Basically the reverse of filter.  Return all elements that do NOT match the selector<br />                                $("#foo").not('.bar'); //Selector<br />                $("#foo").not($('.bar')); //Objects<br />                $("#foo").not($('.bar').get(0)); //Single element<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>selector - String|Array|Object</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - Returns an appframework object after the filter was run</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().not(selector) reduces a collection to elements that do not match the selector</p>

<p>Let's say we have all &lt;li> elements and we want to remove the elements that have class "anchor"</p>

<pre><code class="language-html"><span class='linenumber'>&lt;ul&gt;</span>
<span class='linenumber'>    &lt;li class="anchor"&gt;One&lt;/li&gt;</span>
<span class='linenumber'>    &lt;li class="anchor"&gt;Two&lt;/li&gt;</span>
<span class='linenumber'>    &lt;li&gt;Three&lt;/li&gt;</span>
<span class='linenumber'>    &lt;li&gt;Four&lt;/li&gt;</span>
<span class='linenumber'>    &lt;li&gt;Five&lt;/li&gt;</span>
<span class='linenumber'>    &lt;li&gt;Six&lt;/li&gt;</span>
<span class='linenumber'>&lt;/ul&gt;</span>
</code></pre>

<p>By calling not of ".anchor", we will reduce our set from six elements to four.</p>

<pre><code class="language-js"><span class='linenumber'>$("ul li").not(".anchor");</span>
</code></pre>

<ul id="notTest">
    <li class="anchor">One</li>
    <li class="anchor">Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
</ul>

<p><input type="button" value="Get All LI count" onclick="alert($('#notTest li').length)"></p>

<p><input type="button" value="Get not(.anchor) count" onclick="alert($('#notTest li').not('.anchor').length)"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_data' title='$().data(key,[value]);' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_data",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__data' style='display:none'>
            <pre style='padding-left:25px'><code>
            data: function(key, value) {
                return this.attr('data-' + key, value);
            },
            </code></pre>
             </div>
      </div>
          <h2>$().data(key,[value]);</h2>



          <section class='description'><p>Gets or set data-* attribute parameters on elements (when a string)<br />When used as a getter, it's only the first element<br />                                $().data("foo"); //Gets the data-foo attribute for the first element<br />                $().data("foo","bar"); //Sets the data-foo attribute for all elements<br />                $().data("foo",{bar:'bar'});//object as the data<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>key - String</li>
<li style='padding-left:15px;line-height:20px'>value - String|Array|Object</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>String|Object - returns the value or appframework object</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().data(key,value) gets or sets data-* attributes on an HTML element when value is a string.</p>

<p>This makes a call to $().attr("data-"+key,value).</p>

<p>Please see <a href="#_attr">$().attr()</a></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_end' title='$().end();' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_end",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__end' style='display:none'>
            <pre style='padding-left:25px'><code>
            end: function() {
                return this.oldElement != nundefined ? this.oldElement : $();
            },
            </code></pre>
             </div>
      </div>
          <h2>$().end();</h2>



          <section class='description'><p>Rolls back the appframework elements when filters were applied<br />This can be used after .not(), .filter(), .children(), .parent()<br />                                $().filter(".panel").end(); //This will return the collection BEFORE filter is applied<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol></ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - returns the previous appframework object before filter was applied</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().end() rolls back the elements before filtering</p>

<p>Let's look at the filter example below.</p>

<pre><code class="language-html"><span class='linenumber'>&lt;ul&gt;</span>
<span class='linenumber'>    &lt;li class="anchor"&gt;One&lt;/li&gt;</span>
<span class='linenumber'>    &lt;li class="anchor"&gt;Two&lt;/li&gt;</span>
<span class='linenumber'>    &lt;li&gt;Three&lt;/li&gt;</span>
<span class='linenumber'>    &lt;li&gt;Four&lt;/li&gt;</span>
<span class='linenumber'>    &lt;li&gt;Five&lt;/li&gt;</span>
<span class='linenumber'>    &lt;li&gt;Six&lt;/li&gt;</span>
<span class='linenumber'>&lt;/ul&gt;</span>
</code></pre>

<p>By calling filter of ".anchor", we will reduce our set from six elements to two.<br />
After we call end(), it will reduce the set back to $("ul li");</p>

<pre><code class="language-js"><span class='linenumber'>$("ul li").filter(".anchor").end();</span>
</code></pre>

<ul id="endTest">
    <li class="anchor">One</li>
    <li class="anchor">Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
</ul>

<p><input type="button" value="Get All LI count" onclick="alert($('#endTest li').length)"></p>

<p><input type="button" value="Get end count" onclick="alert($('#endTest li').filter('.anchor').end().length)"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_clone' title='$().clone();' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_clone",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__clone' style='display:none'>
            <pre style='padding-left:25px'><code>
            clone: function(deep) {
                deep = deep === false ? false : true;
                if (this.length === 0)
                    return this;
                var elems = [];
                for (var i = 0; i &lt; this.length; i++) {
                    elems.push(this[i].cloneNode(deep));
                }

                return $(elems);
            },
            </code></pre>
             </div>
      </div>
          <h2>$().clone();</h2>



          <section class='description'><p>Clones the nodes in the collection.<br />                                $().clone();// Deep clone of all elements<br />                $().clone(false); //Shallow clone<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>[deep] - Boolean</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - appframework object of cloned nodes</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().clone(deep) clones all the DOM nods in the collection.  If deep is set to "true", it will also clone the elements children.</p>

<p>Let's say we have an ordered list and we want to keep adding elements by cloning the first LI.</p>

<pre><code class="language-html"><span class='linenumber'>&lt;ol&gt;</span>
<span class='linenumber'>    &lt;li&gt;Entry&lt;/li&gt;</span>
<span class='linenumber'>&lt;/ol&gt;</span>
</code></pre>

<p>We can clone and then add it to the list like the following.</p>

<pre><code class="language-js"><span class='linenumber'>var obj=$("ol li").eq(0).clone();</span>
<span class='linenumber'>$("ol li").append(obj);</span>
</code></pre>

<p>Below we can clone and add elements.  You can also change the text of the first element to see how the cloned nodes will reflecct it.</p>

<script>
function changeNode(){
    $("#cloneTest li").eq(0).html("Updated Text");
}

function cloneTest(){
    $("#cloneTest li").eq(0).clone().appendTo("#cloneTest");
}
</script>

<ol id="cloneTest">
    <li>Entry</li>
</ol>

<p><input type="button" value="Clone a node" onclick="cloneTest()"></p>

<p><input type="button" value="Change first LI html" onclick="changeNode()"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_size' title='$().size();' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_size",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__size' style='display:none'>
            <pre style='padding-left:25px'><code>
            size: function() {
                return this.length;
            },
            </code></pre>
             </div>
      </div>
          <h2>$().size();</h2>



          <section class='description'><p>Returns the number of elements in the collection<br />                                $().size();<br />                </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol></ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Int - </div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().size() returns the number of elements in the collection.  This is the same as $().length;</p>

              </div>
             </div>
          </article>
       </div>

       <div id='_serialize' title='$().serialize()' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_serialize",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__serialize' style='display:none'>
            <pre style='padding-left:25px'><code>
            serialize: function() {
                if (this.length === 0)
                    return "";
                var params = [];
                for (var i = 0; i &lt; this.length; i++) {
                    this.slice.call(this[i].elements).forEach(function(elem) {
                        var type = elem.getAttribute("type");
                        if (elem.nodeName.toLowerCase() != "fieldset" && !elem.disabled && type != "submit" && type != "reset" && type != "button" && ((type != "radio" && type != "checkbox") || elem.checked)) {

                            if (elem.getAttribute("name")) {
                                if (elem.type == "select-multiple") {
                                    for (var j = 0; j &lt; elem.options.length; j++) {
                                        if (elem.options[j].selected)
                                            params.push(elem.getAttribute("name") + "=" + encodeURIComponent(elem.options[j].value));
                                    }
                                } else
                                    params.push(elem.getAttribute("name") + "=" + encodeURIComponent(elem.value));
                            }
                        }
                    });
                }
                return params.join("&");
            },
            </code></pre>
             </div>
      </div>
          <h2>$().serialize()</h2>



          <section class='description'><p>Serailizes a form into a query string<br />                              $().serialize();<br />               </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol></ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>String - </div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().serialize() serializes a form for use in a url.</p>

<p>Below is a form that we will serialize the values of</p>

<pre><code class="language-html"><span class='linenumber'>&lt;form id="serializeForm" onsubmit="return false"&gt;Name:</span>
<span class='linenumber'>    &lt;input type='text' class='af-ui-forms' name='name' value='John Smith'&gt;</span>
<span class='linenumber'>    &lt;br&gt;</span>
<span class='linenumber'>    &lt;input type='checkbox' class='af-ui-forms' value='yes' checked name='human'&gt;</span>
<span class='linenumber'>    &lt;label for='human'&gt;Are you human?&lt;/label&gt;</span>
<span class='linenumber'>    &lt;br&gt;</span>
<span class='linenumber'>    &lt;br&gt;Gender: &lt;span&gt;&lt;select id='serialize_gender' name="gender"&gt;&lt;option value='m'&gt;Male&lt;/option&gt;&lt;option value='f'&gt;Female&lt;/option&gt;&lt;select&gt;&lt;/span&gt;</span>
<span class='linenumber'>    &lt;br&gt;</span>
<span class='linenumber'>    &lt;br&gt;</span>
<span class='linenumber'>    &lt;br&gt;</span>
<span class='linenumber'>    &lt;input type="button" onclick="serializeForm()" value="Serialize"&gt;</span>
<span class='linenumber'>&lt;/form&gt;</span>
</code></pre>

<p>Below is the form that you can modify and get the serialized result.</p>

<script>
function serializeForm() {
    alert($("#serializeForm").serialize());
}
</script>

<form id="serializeForm" onsubmit="return false">Name:
    <input type='text' class='af-ui-forms' name='name' value='John Smith'>
    <br>
    <input type='checkbox' class='af-ui-forms' value='yes' checked name='human' id="human">
    <label for='human'>Are you human?</label>
    <br>
    <br>Gender: <span><select id='serialize_gender' name="gender"><option value='m'>Male</option><option value='f'>Female</option><select></span>
    <br>
    <br>
    <br>
    <input type="button" onclick="serializeForm()" value="Serialize">
</form>

              </div>
             </div>
          </article>
       </div>

       <div id='_eq' title='$().eq(index)' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_eq",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__eq' style='display:none'>
            <pre style='padding-left:25px'><code>
            eq: function(ind) {
                return $(this.get(ind));
            },
            </code></pre>
             </div>
      </div>
          <h2>$().eq(index)</h2>



          <section class='description'><p>Reduce the set of elements based off index<br />                               $().eq(index)<br />               </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>index - Int</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - appframework object</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().eq(index) reduces the collection to the element at that index.  If the index is negative, it will go backwards.</p>

<p>Let's take the following list</p>

<pre><code class="language-html"><span class='linenumber'>&lt;ol&gt;</span>
<span class='linenumber'>    &lt;li&gt;One&lt;/li&gt;</span>
<span class='linenumber'>    &lt;li&gt;Two&lt;/li&gt;</span>
<span class='linenumber'>    &lt;li&gt;Three&lt;/li&gt;</span>
<span class='linenumber'>    &lt;li&gt;Four&lt;/li&gt;</span>
<span class='linenumber'>    &lt;li&gt;Five&lt;/li&gt;</span>
<span class='linenumber'>&lt;/ol&gt;</span>
</code></pre>

<ol id="eqTest">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ol>

<p>Now we will get the html of the li at 0, 3 and -1.</p>

<p>0 = "One"<br />
3 = "Four"<br />
-1 = "Five"</p>

<p><input type="button" value="eq(0)" onclick="alert($('#eqTest li').eq(0).html())"><br />
<input type="button" value="eq(3)" onclick="alert($('#eqTest li').eq(3).html())"><br />
<input type="button" value="eq(-1)" onclick="alert($('#eqTest li').eq(-1).html())"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_index' title='$().index(elem)' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_index",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__index' style='display:none'>
            <pre style='padding-left:25px'><code>
            index: function(elem) {
                return elem ? this.indexOf($(elem)[0]) : this.parent().children().indexOf(this[0]);
            },
            </code></pre>
             </div>
      </div>
          <h2>$().index(elem)</h2>



          <section class='description'><p>Returns the index of the selected element in the collection<br />                              $().index(elem)<br />               </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>element - String|Object</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>integer - - index of selected element</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().index(element) returns the numerical index of the element matching the selector.</p>

<p>Let's take the following list</p>

<pre><code class="language-html"><span class='linenumber'>&lt;ol&gt;</span>
<span class='linenumber'>    &lt;li&gt;One&lt;/li&gt;</span>
<span class='linenumber'>    &lt;li&gt;Two&lt;/li&gt;</span>
<span class='linenumber'>    &lt;li&gt;Three&lt;/li&gt;</span>
<span class='linenumber'>    &lt;li id="seven"&gt;Seven&lt;/li&gt;</span>
<span class='linenumber'>    &lt;li&gt;Four&lt;/li&gt;</span>
<span class='linenumber'>    &lt;li&gt;Five&lt;/li&gt;</span>
<span class='linenumber'>&lt;/ol&gt;</span>
</code></pre>

<p>Now we want to get the index of the element with id "seven"</p>

<pre><code class="language-js"><span class='linenumber'>var ind=$("ol li").index("#seven");</span>
</code></pre>

<ol id="indexTest">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li id="seven">Seven</li>
    <li>Four</li>
    <li>Five</li>
</ol>

<p><input type="button" value="Get Index" onclick="alert($('#indexTest li').index($('#indextTest #seven')))"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_is' title='$().is(selector)' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_is",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__is' style='display:none'>
            <pre style='padding-left:25px'><code>
            is: function(selector) {
                return !!selector && this.filter(selector).length &gt; 0;
            }

        };
            </code></pre>
             </div>
      </div>
          <h2>$().is(selector)</h2>



          <section class='description'><p>Returns boolean if the object is a type of the selector<br />                            $().is(selector)<br />              <br />param {String|Object} selector to act upon</p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol></ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>boolean - </div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().is(selector) returns a boolean if at least one element in the collection match the selector</p>

<p>Lets take the following html.</p>

<pre><code class="language-html"><span class='linenumber'>&lt;ol&gt;</span>
<span class='linenumber'>    &lt;li&gt;One&lt;/li&gt;</span>
<span class='linenumber'>    &lt;li class="foo"&gt;Two&lt;/li&gt;</span>
<span class='linenumber'>    &lt;li&gt;Three&lt;/li&gt;</span>
<span class='linenumber'>&lt;/ol&gt;</span>
</code></pre>

<p>We will now check three cases.</p>

<pre><code class="language-js"><span class='linenumber'>$("ol li").is("li"); //Check if they are LI elements</span>
<span class='linenumber'>$("ol li").is(".foo"); //Check if there are any elements of class foo</span>
<span class='linenumber'>$("ol li").is("div"); //Check if any elements are divs' - they are not</span>
</code></pre>

<p>Run the tests below.  The last one will fail because a LI element can not be a div.</p>

<ol id="isTest">
    <li>One</li>
    <li class="foo">Two</li>
    <li>Three</li>
</ol>

<p><input type="button" value="Check LI" onclick="alert($('#isTest li').is('li'))"></p>

<p><input type="button" value="Check .foo" onclick="alert($('#isTest li').is('.foo'))"></p>

<p><input type="button" value="Check DIV" onclick="alert($('#isTest li').is('div'))"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_jsonP' title='$.jsonP(options)' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_jsonP",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_jsonP' style='display:none'>
            <pre style='padding-left:25px'><code>
            $.jsonP = function(options) {
            if (isWin8) {
                options.type = "get";
                options.dataType = null;
                return $.get(options);
            }
            var callbackName = 'jsonp_callback' + (++_jsonPID);
            var abortTimeout = "",
                context;
            var script = document.createElement("script");
            var abort = function() {
                $(script).remove();
                if (window[callbackName])
                    window[callbackName] = empty;
            };
            window[callbackName] = function(data) {
                clearTimeout(abortTimeout);
                $(script).remove();
                delete window[callbackName];
                options.success.call(context, data);
            };
            script.src = options.url.replace(/=\?/, '=' + callbackName);
            if (options.error) {
                script.onerror = function() {
                    clearTimeout(abortTimeout);
                    options.error.call(context, "", 'error');
                };
            }
            $('head').append(script);
            if (options.timeout &gt; 0)
                abortTimeout = setTimeout(function() {
                    options.error.call(context, "", 'timeout');
                }, options.timeout);
            return {};
        };
            </code></pre>
             </div>
      </div>
          <h2>$.jsonP(options)</h2>



          <section class='description'><p>Execute a jsonP call, allowing cross domain scripting<br />options.url - URL to call<br />options.success - Success function to call<br />options.error - Error function to call<br />                        $.jsonP({url:'mysite.php?callback=?&amp;foo=bar',success:function(){},error:function(){}});<br />            </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>options - Object</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              
              </div>
             </div>
          </article>
       </div>

       <div id='$_ajax' title='$.ajax(options)' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ajax",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ajax' style='display:none'>
            <pre style='padding-left:25px'><code>
            $.ajax = function(opts) {
            var xhr;
            try {

                var settings = opts || {};
                for (var key in $.ajaxSettings) {
                    if (typeof(settings[key]) == 'undefined')
                        settings[key] = $.ajaxSettings[key];
                }

                if (!settings.url)
                    settings.url = window.location;
                if (!settings.contentType)
                    settings.contentType = "application/x-www-form-urlencoded";
                if (!settings.headers)
                    settings.headers = {};

                if (!('async' in settings) || settings.async !== false)
                    settings.async = true;

                if (!settings.dataType)
                    settings.dataType = "text/html";
                else {
                    switch (settings.dataType) {
                        case "script":
                            settings.dataType = 'text/javascript, application/javascript';
                            break;
                        case "json":
                            settings.dataType = 'application/json';
                            break;
                        case "xml":
                            settings.dataType = 'application/xml, text/xml';
                            break;
                        case "html":
                            settings.dataType = 'text/html';
                            break;
                        case "text":
                            settings.dataType = 'text/plain';
                            break;
                        default:
                            settings.dataType = "text/html";
                            break;
                        case "jsonp":
                            return $.jsonP(opts);
                    }
                }
                if ($.isObject(settings.data))
                    settings.data = $.param(settings.data);
                if (settings.type.toLowerCase() === "get" && settings.data) {
                    if (settings.url.indexOf("?") === -1)
                        settings.url += "?" + settings.data;
                    else
                        settings.url += "&" + settings.data;
                }

                if (/=\?/.test(settings.url)) {
                    return $.jsonP(settings);
                }
                if (settings.crossDomain === null) settings.crossDomain = /^([\w-]+:)?\/\/([^\/]+)/.test(settings.url) &&
                        RegExp.$2 != window.location.host;

                if (!settings.crossDomain)
                    settings.headers = $.extend({
                        'X-Requested-With': 'XMLHttpRequest'
                    }, settings.headers);
                var abortTimeout;
                var context = settings.context;
                var protocol = /^([\w-]+:)\/\//.test(settings.url) ? RegExp.$1 : window.location.protocol;

                //ok, we are really using xhr
                xhr = new window.XMLHttpRequest();


                xhr.onreadystatechange = function() {
                    var mime = settings.dataType;
                    if (xhr.readyState === 4) {
                        clearTimeout(abortTimeout);
                        var result, error = false;
                        if ((xhr.status &gt;= 200 && xhr.status &lt; 300) || xhr.status === 0 && protocol == 'file:') {
                            if (mime === 'application/json' && !(/^\s*$/.test(xhr.responseText))) {
                                try {
                                    result = JSON.parse(xhr.responseText);
                                } catch (e) {
                                    error = e;
                                }
                            } else if (mime === 'application/xml, text/xml') {
                                result = xhr.responseXML;
                            } else if (mime == "text/html") {
                                result = xhr.responseText;
                                $.parseJS(result);
                            } else
                                result = xhr.responseText;
                            //If we're looking at a local file, we assume that no response sent back means there was an error
                            if (xhr.status === 0 && result.length === 0)
                                error = true;
                            if (error)
                                settings.error.call(context, xhr, 'parsererror', error);
                            else {
                                settings.success.call(context, result, 'success', xhr);
                            }
                        } else {
                            error = true;
                            settings.error.call(context, xhr, 'error');
                        }
                        settings.complete.call(context, xhr, error ? 'error' : 'success');
                    }
                };
                xhr.open(settings.type, settings.url, settings.async);
                if (settings.withCredentials) xhr.withCredentials = true;

                if (settings.contentType)
                    settings.headers['Content-Type'] = settings.contentType;
                for (var name in settings.headers)
                    if (typeof settings.headers[name] === 'string')
                        xhr.setRequestHeader(name, settings.headers[name]);
                if (settings.beforeSend.call(context, xhr, settings) === false) {
                    xhr.abort();
                    return false;
                }

                if (settings.timeout &gt; 0)
                    abortTimeout = setTimeout(function() {
                        xhr.onreadystatechange = empty;
                        xhr.abort();
                        settings.error.call(context, xhr, 'timeout');
                    }, settings.timeout);
                xhr.send(settings.data);
            } catch (e) {
                // General errors (e.g. access denied) should also be sent to the error callback
                console.log(e);
                settings.error.call(context, xhr, 'error', e);
            }
            return xhr;
        };
            </code></pre>
             </div>
      </div>
          <h2>$.ajax(options)</h2>



          <section class='description'><p>Execute an Ajax call with the given options<br />options.type - Type of request<br />options.beforeSend - function to execute before sending the request<br />options.success - success callback<br />options.error - error callback<br />options.complete - complete callback - callled with a success or error<br />options.timeout - timeout to wait for the request<br />options.url - URL to make request against<br />options.contentType - HTTP Request Content Type<br />options.headers - Object of headers to set<br />options.dataType - Data type of request<br />options.data - data to pass into request.  $.param is called on objects<br />                        var opts={<br />            type:"GET",<br />            success:function(data){},<br />            url:"mypage.php",<br />            data:{bar:'bar'},<br />            }<br />            $.ajax(opts);<br />            </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>options - Object</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.ajax(opts) makes an Ajax call using XMLHttpRequest Object.</p>

<p>Examples below</p>

<pre><code class="language-js"><span class='linenumber'>$.ajax({</span>
<span class='linenumber'>    type:"GET",</span>
<span class='linenumber'>    url:"mypage.php",</span>
<span class='linenumber'>    data:{'foo':'bar'},</span>
<span class='linenumber'>    success:function(data){}</span>
<span class='linenumber'>});</span>
</code></pre>

<p>Below is an example for posting a JSON payload to a server</p>

<pre><code><span class='linenumber'>$.ajax({</span>
<span class='linenumber'>    type:"post",</span>
<span class='linenumber'>    url:"/api/updateuser/",</span>
<span class='linenumber'>    data:{id:1,username:'bill'},</span>
<span class='linenumber'>    contentType:"application/json"</span>
<span class='linenumber'>});</span>
</code></pre>

<p>When the response has the type 'application/json', we will return the JSON object for you.</p>

<p>When the response has the type "application/xml", we return responseXML.</p>

<p>When the response has the type "text/html", we call $.parseJS on the result to process any JS scripts in the response.</p>

<p>Below is the code to show the dataType values</p>

<pre><code class="language-js"><span class='linenumber'>switch (settings.dataType) {</span>
<span class='linenumber'>    case "script":</span>
<span class='linenumber'>        settings.dataType = 'text/javascript, application/javascript';</span>
<span class='linenumber'>        break;</span>
<span class='linenumber'>    case "json":</span>
<span class='linenumber'>        settings.dataType = 'application/json';</span>
<span class='linenumber'>        break;</span>
<span class='linenumber'>    case "xml":</span>
<span class='linenumber'>        settings.dataType = 'application/xml, text/xml';</span>
<span class='linenumber'>        break;</span>
<span class='linenumber'>    case "html":</span>
<span class='linenumber'>        settings.dataType = 'text/html';</span>
<span class='linenumber'>        break;</span>
<span class='linenumber'>    case "text":</span>
<span class='linenumber'>        settings.dataType = 'text/plain';</span>
<span class='linenumber'>        break;</span>
<span class='linenumber'>    default:</span>
<span class='linenumber'>        settings.dataType = "text/html";</span>
<span class='linenumber'>        break;</span>
<span class='linenumber'>    case "jsonp":</span>
<span class='linenumber'>        return $.jsonP(opts);</span>
<span class='linenumber'>}</span>
</code></pre>

              </div>
             </div>
          </article>
       </div>

       <div id='$_get' title='$.get(url,success)' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_get",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_get' style='display:none'>
            <pre style='padding-left:25px'><code>
            $.get = function(url, success) {
            return this.ajax({
                url: url,
                success: success
            });
        };
            </code></pre>
             </div>
      </div>
          <h2>$.get(url,success)</h2>



          <section class='description'><p>Shorthand call to an Ajax GET request<br />                        $.get("mypage.php?foo=bar",function(data){});<br />            </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>url - String</li>
<li style='padding-left:15px;line-height:20px'>success - Function</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.get(url,successFnc) is a shorthand call to $.ajax</p>

<p>The first parameter is the URL, the second is the sucess function.  You can not specify any other options for $.ajax.</p>

<pre><code class="language-js"><span class='linenumber'>$.get("mydata.php?foo=bar",function(res){console.log(res)});</span>
</code></pre>

              </div>
             </div>
          </article>
       </div>

       <div id='$_post' title='$.post(url,[data],success,[dataType])' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_post",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_post' style='display:none'>
            <pre style='padding-left:25px'><code>
            $.post = function(url, data, success, dataType) {
            if (typeof(data) === "function") {
                success = data;
                data = {};
            }
            if (dataType === nundefined)
                dataType = "html";
            return this.ajax({
                url: url,
                type: "POST",
                data: data,
                dataType: dataType,
                success: success
            });
        };
            </code></pre>
             </div>
      </div>
          <h2>$.post(url,[data],success,[dataType])</h2>



          <section class='description'><p>Shorthand call to an Ajax POST request<br />                        $.post("mypage.php",{bar:'bar'},function(data){});<br />            </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>url - String</li>
<li style='padding-left:15px;line-height:20px'>[data] - Object</li>
<li style='padding-left:15px;line-height:20px'>success - Function</li>
<li style='padding-left:15px;line-height:20px'>[dataType] - String</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.post(url,[data],success,[dataType]) is a shorthand call to Ajax POST</p>

<p>The following is a simple post with no data and a success callback</p>

<pre><code class="language-js"><span class='linenumber'>$.post("mypage.php",function(res){console.log(res)});</span>
</code></pre>

<p>The next example shows how to use the data and dataType parameters</p>

<pre><code><span class='linenumber'>$.post("mypage.php",{username:'foo'},function(res){},'html');</span>
</code></pre>

              </div>
             </div>
          </article>
       </div>

       <div id='$_getJSON' title='$.getJSON(url,data,success)' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_getJSON",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_getJSON' style='display:none'>
            <pre style='padding-left:25px'><code>
            $.getJSON = function(url, data, success) {
            if (typeof(data) === "function") {
                success = data;
                data = {};
            }
            return this.ajax({
                url: url,
                data: data,
                success: success,
                dataType: "json"
            });
        };
            </code></pre>
             </div>
      </div>
          <h2>$.getJSON(url,data,success)</h2>



          <section class='description'><p>Shorthand call to an Ajax request that expects a JSON response<br />                        $.getJSON("mypage.php",{bar:'bar'},function(data){});<br />            </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>url - String</li>
<li style='padding-left:15px;line-height:20px'>[data] - Object</li>
<li style='padding-left:15px;line-height:20px'>[success] - Function</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.getJSON(url,data,success) is a wrapper to $.ajax that expects JSON data as the response.  It will return the JSON object to the success function.</p>

<pre><code class="language-js"><span class='linenumber'>$.getJSON('mypage.php',</span>
<span class='linenumber'>    {'foo':'bar'},</span>
<span class='linenumber'>    function(data){</span>
<span class='linenumber'>        //interact with JSON object</span>
<span class='linenumber'>    }</span>
<span class='linenumber'>);</span>
</code></pre>

<p>You can not specify other ajax options.</p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_param' title='$.param(object,[prefix];' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_param",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_param' style='display:none'>
            <pre style='padding-left:25px'><code>
            $.param = function(obj, prefix) {
            var str = [];
            if (obj instanceof $afm) {
                obj.each(function() {
                    var k = prefix ? prefix + "[" + this.id + "]" : this.id,
                        v = this.value;
                    str.push((k) + "=" + encodeURIComponent(v));
                });
            } else {
                for (var p in obj) {

                    if ($.isFunction(obj[p]))
                        continue;
                    var k = prefix ? prefix + "[" + p + "]" : p,
                        v = obj[p];
                    str.push($.isObject(v) ? $.param(v, k) : (k) + "=" + encodeURIComponent(v));
                }
            }
            return str.join("&");
        };
            </code></pre>
             </div>
      </div>
          <h2>$.param(object,[prefix];</h2>



          <section class='description'><p>Converts an object into a key/value par with an optional prefix.  Used for converting objects to a query string<br />                        var obj={<br />            foo:'foo',<br />            bar:'bar'<br />            }<br />            var kvp=$.param(obj,'data');<br />            </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>object - Object</li>
<li style='padding-left:15px;line-height:20px'>[prefix] - String</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>String - Key/value pair representation</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.param(object,[prefix]) is usefull for converting an object to query string variables.</p>

<p>Let's look at the following object</p>

<pre><code class="language-js"><span class='linenumber'>var obj {</span>
<span class='linenumber'>    foo:'bar',</span>
<span class='linenumber'>    id:'12'</span>
<span class='linenumber'>};</span>
</code></pre>

<script>
var $paramTest={
    foo:'bar',
    id:'12'
}
</script>

<p><input type="button" onclick="alert($.param($paramTest))" value="$.param()"></p>

<p><input type="button" onclick="alert($.param($paramTest,'pre_'))" value="$.param() with prefix"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_parseJSON' title='$.parseJSON(string)' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_parseJSON",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_parseJSON' style='display:none'>
            <pre style='padding-left:25px'><code>
            $.parseJSON = function(string) {
            return JSON.parse(string);
        };
            </code></pre>
             </div>
      </div>
          <h2>$.parseJSON(string)</h2>



          <section class='description'><p>Used for backwards compatibility.  Uses native JSON.parse function<br />                        var obj=$.parseJSON("{\"bar\":\"bar\"}");<br />            </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol></ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - </div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>This is for backwards compatibility with old plugins.</p>

<pre><code class="language-js"><span class='linenumber'>var obj=$.parseJSON("{\"foo\":\"bar\"}");</span>
</code></pre>

<p>Now we will parse the object and see the value of obj.foo</p>

<script>
var objParse=$.parseJSON("{\"foo\":\"bar\"}");

</script>

<p><input type="button" value="$.parseJSON" onclick="alert(objParse.foo);"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_parseXML' title='$.parseXML(string)' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_parseXML",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_parseXML' style='display:none'>
            <pre style='padding-left:25px'><code>
            $.parseXML = function(string) {
            if (isWin8) {
                MSApp.execUnsafeLocalFunction(function() {
                    return (new DOMParser()).parseFromString(string, "text/xml");
                });
            } else
                return (new DOMParser()).parseFromString(string, "text/xml");
        };
            </code></pre>
             </div>
      </div>
          <h2>$.parseXML(string)</h2>



          <section class='description'><p>Helper function to convert XML into  the DOM node representation<br />                        var xmlDoc=$.parseXML("bar");<br />            </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>string - String</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - DOM nodes</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.parseXML takes a string and returns a DOM Document</p>

<pre><code class="language-js"><span class='linenumber'> var xmlDoc=$.parseXML("&lt;xml&gt;&lt;foo&gt;bar&lt;/foo&gt;&lt;/xml&gt;");</span>
</code></pre>

<p>The above will return the DOM Document that you can then interact with</p>

<script>
 var xmlDoc=$.parseXML("<xml><foo>bar</foo></xml>");
 </script>

<p><input type="button" onclick='alert(xmlDoc)' value="$.parseXML"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_uuid' title='$.uuid' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_uuid",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_uuid' style='display:none'>
            <pre style='padding-left:25px'><code>
            $.uuid = function() {
            var S4 = function() {
                return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
            };
            return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
        };
            </code></pre>
             </div>
      </div>
          <h2>$.uuid</h2>



          <section class='description'><p>Utility function to create a psuedo GUID<br />                      var id= $.uuid();<br />           </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol></ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.uuid creates a psuedo GUID.  We uses this with plugins to create a unique id for each plugin</p>

<pre><code class="language-js"><span class='linenumber'>var id=$.uuid();</span>
</code></pre>

<p><input type="button" value="Generate $.uuid()" onclick="alert($.uuid())"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_create' title='$.create(type,[params])' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_create",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_create' style='display:none'>
            <pre style='padding-left:25px'><code>
            $.create = function(type, props) {
            var elem;
            var f = new $afm();
            if (props || type[0] !== "&lt;") {
                if (props.html)
                    props.innerHTML = props.html, delete props.html;

                elem = document.createElement(type);
                for (var j in props) {
                    elem[j] = props[j];
                }
                f[f.length++] = elem;
            } else {
                elem = document.createElement("div");
                if (isWin8) {
                    MSApp.execUnsafeLocalFunction(function() {
                        elem.innerHTML = selector.trim();
                    });
                } else
                    elem.innerHTML = type;
                _shimNodes(elem.childNodes, f);
            }
            return f;
        };
            </code></pre>
             </div>
      </div>
          <h2>$.create(type,[params])</h2>



          <section class='description'><p>$.create - a faster alertnative to $("this is some text");<br />                    $.create("div",{id:'main',innerHTML:'this is some text'});<br />          $.create("this is some text");<br />          </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>DOM - String</li>
<li style='padding-left:15px;line-height:20px'>properties - [Object]</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - Returns an appframework object</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.create(type,[params]) is new for 2.0.  It is a faster, and sometimes "safter" way to create DOM Nodes.</p>

<p>$.create allows you to bypass logic inside the $() engine and jump right to element creation.  It returns an App Framework collection.</p>

<p>$.create works two ways.</p>

<ol>
    <li>Parse a string and return the DOM elements (slower)</li>
    <li>Create the element using document.createElement and setting properties (faster)</li>
</ol>

<p>Below are two examples that provide the same node.  The first is faster.</p>

<pre><code class="language-html"><span class='linenumber'>var faster=$.create("div",{id:"test",html:"Test HTML"})</span>
<span class='linenumber'>var slower=$.create(" &lt; div id='test'&gt;Test HTML&lt; /div&gt; ");</span>
</code></pre>

<script>
var faster=$.create("div",{id:"test",html:"Test HTML"})

var slower=$.create("<div id='test'>Test HTML</div>");
</script>

<p><input type="button" value="Faster" onclick="alert(faster.html())"></p>

<p><input type="button" value="Slower" onclick="alert(slower.html())"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_query' title='$.query(selector,[context])' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_query",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_query' style='display:none'>
            <pre style='padding-left:25px'><code>
            $.query = function(sel, what) {
            if (!sel)
                return new $afm();
            what = what || document;
            var f = new $afm();
            return f.selector(sel, what);
        };
            </code></pre>
             </div>
      </div>
          <h2>$.query(selector,[context])</h2>



          <section class='description'><p>$.query  - a faster alertnative to $("div");<br />                    $.query(".panel");<br />          </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>selector - String</li>
<li style='padding-left:15px;line-height:20px'>[context] - Object</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - Returns an appframework object</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.query(selector,[context]) is faster then using $() to find an element using a query selector.</p>

<p>$() has a lot of logic to handle finding elements, turning arrays/objects into a collection, etc.</p>

<p>$.query lets you jump right to the query selector engine and returns an App Framework collection.  You should use this when possible.</p>

<p>When context is passed in, it must be a DOM node to search within.</p>

<pre><code><span class='linenumber'>var divs=$.query("divs");</span>
<span class='linenumber'>var elem=$.query("#main");</span>
<span class='linenumber'>var lis=$.query("li",$("#main").get(0));</span>
</code></pre>

              </div>
             </div>
          </article>
       </div>

       <div id='_bind' title='$().bind(event,callback)' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_bind",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__bind' style='display:none'>
            <pre style='padding-left:25px'><code>
            $.fn.bind = function(event, callback) {
            for (var i = 0; i &lt; this.length; i++) {
                add(this[i], event, callback);
            }
            return this;
        };
            </code></pre>
             </div>
      </div>
          <h2>$().bind(event,callback)</h2>



          <section class='description'><p>Binds an event to each element in the collection and executes the callback<br />                        $().bind('click',function(){console.log('I clicked '+this.id);});<br />            </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>event - String|Object</li>
<li style='padding-left:15px;line-height:20px'>callback - Function</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - appframework object</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().bind(event,callback) binds an event for each element in the collection, and executes a callback when teh event is dispatched.</p>

<p>When calling $().bind(), the elements MUST already exist in the DOM to be able to recieve an event listener.  It is sometimes better to use<br />
$().on instead for event delegation when your DOM has dynamic content.</p>

<p>Below is a sample of binding a click event to all list items</p>

<pre><code><span class='linenumber'>$("ol li").bind("click",function(event){alert(this.innerHTML)});</span>
</code></pre>

<pre><code class="language-html"><span class='linenumber'>&lt;ol&gt;</span>
<span class='linenumber'>    &lt;li&gt;One&lt;/li&gt;</span>
<span class='linenumber'>    &lt;li&gt;Two&lt;/li&gt;</span>
<span class='linenumber'>    &lt;li&gt;Three&lt;/li&gt;</span>
<span class='linenumber'>&lt;/ol&gt;</span>
</code></pre>

<p>Click one of the items below</p>

<ol id="bindTest">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ol>

<script>
$("#bindTest li").bind("click",function(event){alert(this.innerHTML)});
</script>

              </div>
             </div>
          </article>
       </div>

       <div id='_unbind' title='$().unbind(event,[callback]);' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_unbind",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__unbind' style='display:none'>
            <pre style='padding-left:25px'><code>
            $.fn.unbind = function(event, callback) {
            for (var i = 0; i &lt; this.length; i++) {
                remove(this[i], event, callback);
            }
            return this;
        };
            </code></pre>
             </div>
      </div>
          <h2>$().unbind(event,[callback]);</h2>



          <section class='description'><p>Unbinds an event to each element in the collection.  If a callback is passed in, we remove just that one, otherwise we remove all callbacks for those events<br />                        $().unbind('click'); //Unbinds all click events<br />            $().unbind('click',myFunc); //Unbinds myFunc<br />            </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>event - String|Object</li>
<li style='padding-left:15px;line-height:20px'>[callback] - Function</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - appframework object</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().unbind(event,callback) unbinds an event for each element in the collection.</p>

<p>If no callback function is passed in, we remove all listeners for that event.</p>

<p>Below is a sample of unbinding all click event to all list items</p>

<pre><code class="language-js"><span class='linenumber'>$("ol li").unbind("click");</span>
</code></pre>

<p>Say we had multiple click listners, but only want to unbind one</p>

<pre><code class="language-js"><span class='linenumber'>function bindOne(){</span>
<span class='linenumber'>}</span>
<span class='linenumber'>function bindTwo(){</span>
<span class='linenumber'>}</span>
<span class='linenumber'>$("ol li").bind("click",bindOne);</span>
<span class='linenumber'>$("ol li").bind("click",bindTwo);</span>
</code></pre>

<p>Now we want to unbind only "bindOne"</p>

<pre><code class="language-js"><span class='linenumber'>$("ol li").unbind("click",bindOne);</span>
</code></pre>

<pre><code class="language-html"><span class='linenumber'>&lt;ol&gt;</span>
<span class='linenumber'>    &lt;li&gt;One&lt;/li&gt;</span>
<span class='linenumber'>    &lt;li&gt;Two&lt;/li&gt;</span>
<span class='linenumber'>    &lt;li&gt;Three&lt;/li&gt;</span>
<span class='linenumber'>&lt;/ol&gt;</span>
</code></pre>

<p>Click one of the items below.</p>

<ol id="unbindTest">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ol>

<script>
$("#unbindTest li").bind("click",function(event){alert(this.innerHTML)});
function unbindTest(){
    $("#unbindTest li").unbind("click");
    alert("Click event removed");
}
</script>

<p><input type="button" value="Unbind LI events" onclick="unbindTest()"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_one' title='$().one(event,callback);' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_one",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__one' style='display:none'>
            <pre style='padding-left:25px'><code>
            $.fn.one = function(event, callback) {
            return this.each(function(i, element) {
                add(this, event, callback, null, function(fn, type) {
                    return function() {
                        remove(element, type, fn);
                        var result = fn.apply(element, arguments);
                        return result;
                    };
                });
            });
        };
            </code></pre>
             </div>
      </div>
          <h2>$().one(event,callback);</h2>



          <section class='description'><p>Binds an event to each element in the collection that will only execute once.  When it executes, we remove the event listener then right away so it no longer happens<br />                        $().one('click',function(){console.log('I was clicked once');});<br />            </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>event - String|Object</li>
<li style='padding-left:15px;line-height:20px'>[callback] - Function</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>appframework - object</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().one(event,callback) Registers an event listener and only executes it once.</p>

<p>There are many times where you only want an event to happen one time, and then remove it.  This allows you to do that.</p>

<pre><code class="language-js"><span class='linenumber'>$("#testAnchor").one("click",function(){alert("Submitting form")});</span>
</code></pre>

<p>Try clicking the following button.  It will execute an alert one time.</p>

<p><input type="button" id="testAnchor" value="Submit"></p>

<script>
$("#testAnchor").one("click",function(){alert("Submitting form")});
</script>

              </div>
             </div>
          </article>
       </div>

       <div id='_delegate' title='$().delegate(selector,event,[data],callback)' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_delegate",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__delegate' style='display:none'>
            <pre style='padding-left:25px'><code>
            function addDelegate(element,event,callback,selector,data){
            add(element, event, callback, selector, function(fn) {
                    return function(e) {
                        var evt, match = $(e.target).closest(selector, element).get(0);
                        if (match) {
                            evt = $.extend(createProxy(e), {
                                currentTarget: match,
                                liveFired: element,
                                data:data
                            });
                            return fn.apply(match, [evt].concat([].slice.call(arguments, 1)));
                        }
                    };
                });
        }
        $.fn.delegate = function(selector, event,data, callback) {

            for (var i = 0; i &lt; this.length; i++) {
                addDelegate(this[i],event,callback,selector,data)
            }
            return this;
        };
            </code></pre>
             </div>
      </div>
          <h2>$().delegate(selector,event,[data],callback)</h2>



          <section class='description'><p>Delegate an event based off the selector.  The event will be registered at the parent level, but executes on the selector.<br />                        $("#div").delegate("p",'click',callback);<br />            </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>selector - String|Array|Object</li>
<li style='padding-left:15px;line-height:20px'>event - String|Object</li>
<li style='padding-left:15px;line-height:20px'>data - Object</li>
<li style='padding-left:15px;line-height:20px'>callback - Function</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - appframework object</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().delegate() is provided for backwards compatibility only.  You should use $().on instead.</p>

              </div>
             </div>
          </article>
       </div>

       <div id='_undelegate' title='$().undelegate(selector,event,[callback]);' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_undelegate",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__undelegate' style='display:none'>
            <pre style='padding-left:25px'><code>
            $.fn.undelegate = function(selector, event, callback) {
            for (var i = 0; i &lt; this.length; i++) {
                remove(this[i], event, callback, selector);
            }
            return this;
        };
            </code></pre>
             </div>
      </div>
          <h2>$().undelegate(selector,event,[callback]);</h2>



          <section class='description'><p>Unbinds events that were registered through delegate.  It acts upon the selector and event.  If a callback is specified, it will remove that one, otherwise it removes all of them.<br />                        $("#div").undelegate("p",'click',callback);//Undelegates callback for the click event<br />            $("#div").undelegate("p",'click');//Undelegates all click events<br />            </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>selector - String|Array|Object</li>
<li style='padding-left:15px;line-height:20px'>event - String|Object</li>
<li style='padding-left:15px;line-height:20px'>callback - Function</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - appframework object</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().undelegate() is provided for backwards compatibility only.  You should use $().off instead.</p>

              </div>
             </div>
          </article>
       </div>

       <div id='_on' title='$().on(event,selector,[data],callback);' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_on",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__on' style='display:none'>
            <pre style='padding-left:25px'><code>
            $.fn.on = function(event, selector,data, callback) {
            if(!$.isObject(data)){
                callback=data;
                data=null;
            }

            return selector === nundefined || $.isFunction(selector) ? this.bind(event, selector) : this.delegate(selector, event, data,callback);
        };
            </code></pre>
             </div>
      </div>
          <h2>$().on(event,selector,[data],callback);</h2>



          <section class='description'><p>Similar to delegate, but the function parameter order is easier to understand.<br />If selector is undefined or a function, we just call .bind, otherwise we use .delegate<br />                        $("#div").on("click","p",callback);<br />            </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>selector - String|Array|Object</li>
<li style='padding-left:15px;line-height:20px'>event - String|Object</li>
<li style='padding-left:15px;line-height:20px'>data - Object</li>
<li style='padding-left:15px;line-height:20px'>callback - Function</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - appframework object</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().on() allows you to delegate events to a parent and then search for a selector to execute it against.</p>

<p>Say you have a list that you are adding items to dynamcally.  You want to capture a click on each one, but binding to individual one's on DOM changes is cumbersome.  Instead, you can bind to an ancestor, and then provide a selector to execute against.</p>

<pre><code class="language-html"><span class='linenumber'>&lt;ol&gt;</span>
<span class='linenumber'>    &lt;li&gt;One&lt;/li&gt;</span>
<span class='linenumber'>    &lt;li&gt;Two&lt;/li&gt;</span>
<span class='linenumber'>    &lt;li&gt;Three&lt;/li&gt;</span>
<span class='linenumber'>&lt;/ol&gt;</span>
</code></pre>

<p>To bind a click event, we can do</p>

<pre><code class="language-js"><span class='linenumber'>$("ol").on("click","li",function(){alert(this.innerHTML)});</span>
</code></pre>

<p>Below is a list.  There is a button to append options to the list.  We will delegate the click to the &lt;ol> and then select the &lt;li> it was click on to execute.</p>

<p>Click an item below</p>

<ol id="onTest">
    <li>One</li>
    <li>Two</li>
</ol>

<script>

var counter=1;
function addElement(){
    $("#onTest").append("<li>Added "+counter+"</li>");
    counter++;
}

$("#onTest").on("click","li",function(){alert(this.innerHTML)});
</script>

<p><input type="button" value="Add item" onclick="addElement()"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_off' title='$().off(event,selector,[callback])' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_off",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__off' style='display:none'>
            <pre style='padding-left:25px'><code>
            $.fn.off = function(event, selector, callback) {
            return selector === nundefined || $.isFunction(selector) ? this.unbind(event, selector) : this.undelegate(selector, event, callback);
        };
            </code></pre>
             </div>
      </div>
          <h2>$().off(event,selector,[callback])</h2>



          <section class='description'><p>Removes event listeners for .on()<br />If selector is undefined or a function, we call unbind, otherwise it's undelegate<br />                        $().off("click","p",callback); //Remove callback function for click events<br />            $().off("click","p") //Remove all click events<br />            </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>event - String|Object</li>
<li style='padding-left:15px;line-height:20px'>selector - String|Array|Object</li>
<li style='padding-left:15px;line-height:20px'>callback - Sunction</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - appframework object</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().off(event,selector,[callback]) will remove a delegate added by $().on()</p>

<p>If a callback is specificed, it will only remove that callback.</p>

<p>Below is a sample of undelegating all click event to all list items</p>

<pre><code class="language-js"><span class='linenumber'>$("ol").off("click","li");</span>
</code></pre>

<p>Say we had multiple click listners, but only want to unbind one</p>

<pre><code class="language-js"><span class='linenumber'>function bindOne(){</span>
<span class='linenumber'>}</span>
<span class='linenumber'>function bindTwo(){</span>
<span class='linenumber'>}</span>
<span class='linenumber'>$("ol").on("click","li",bindOne);</span>
<span class='linenumber'>$("ol").on("click","li",bindTwo);</span>
</code></pre>

<p>Now we want to unbind only "bindOne"</p>

<pre><code class="language-js"><span class='linenumber'>$("ol").of("click","li",bindOne);</span>
</code></pre>

<pre><code class="language-html"><span class='linenumber'>&lt;ol&gt;</span>
<span class='linenumber'>    &lt;li&gt;One&lt;/li&gt;</span>
<span class='linenumber'>    &lt;li&gt;Two&lt;/li&gt;</span>
<span class='linenumber'>    &lt;li&gt;Three&lt;/li&gt;</span>
<span class='linenumber'>&lt;/ol&gt;</span>
</code></pre>

<p>Click one of the items below.</p>

<ol id="offTest">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ol>

<script>
$("#offTest").on("click","li",function(event){alert(this.innerHTML)});
function offTest(){
    $("#offTest").off("click","li");
    alert("Click event removed");
}
</script>

<p><input type="button" value="Undelegate LI events" onclick="offTest()"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='_trigger' title='$().trigger(event,data);' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("_trigger",this)'>Show Source</a></h3>

            <div class='viewsource' id='source__trigger' style='display:none'>
            <pre style='padding-left:25px'><code>
            $.fn.trigger = function(event, data, props) {
            if (typeof event == 'string')
                event = $.Event(event, props);
            event.data = data;
            for (var i = 0; i &lt; this.length; i++) {
                this[i].dispatchEvent(event);
            }
            return this;
        };
            </code></pre>
             </div>
      </div>
          <h2>$().trigger(event,data);</h2>



          <section class='description'><p>This triggers an event to be dispatched.  Usefull for emulating events, etc.<br />                $().trigger("click",{foo:'bar'});//Trigger the click event and pass in data<br />        </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>event - String|Object</li>
<li style='padding-left:15px;line-height:20px'>[data] - Object</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>Object - appframework object</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$().trigger(event,data) allows you to trigger any event on the collection.  This is usefull for emulating events, or sending custom events for listeners and delegates.</p>

<pre><code><span class='linenumber'>$("#triggerTest").trigger("customEvent");</span>
</code></pre>

<p>Below is a div that we will register "customEvent" for</p>

<pre><code class="language-html"><span class='linenumber'>&lt;div id="triggerTest"&gt;Won't respond to a click&lt;/div&gt;</span>
</code></pre>

<pre><code class="language-js"><span class='linenumber'>$("#triggerTest").bind("customEvent",function(){alert("Responding to custom event")});</span>
</code></pre>

<div id="triggerTest">Won't respond to a click</div>

<script>
$("#triggerTest").bind("customEvent",function(){alert("Responding to custom event")});

function triggerIt(){
    $("#triggerTest").trigger("customEvent");
}
</script>

<p><input type="button" value="Trigger customEvent" onclick="triggerIt()"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_Event' title='$.Event(type,props);' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_Event",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_Event' style='display:none'>
            <pre style='padding-left:25px'><code>
            $.Event = function(type, props) {
            var event = document.createEvent('Events'),
                bubbles = true;
            if (props)
                for (var name in props)
                    (name == 'bubbles') ? (bubbles = !! props[name]) : (event[name] = props[name]);
            event.initEvent(type, bubbles, true, null, null, null, null, null, null, null, null, null, null, null, null);
            return event;
        };
            </code></pre>
             </div>
      </div>
          <h2>$.Event(type,props);</h2>



          <section class='description'><p>Creates a custom event to be used internally.</p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>type - String</li>
<li style='padding-left:15px;line-height:20px'>[properties] - Object</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>event - a custom event that can then be dispatched</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              
              </div>
             </div>
          </article>
       </div>

       <div id='$_bind' title='$.bind(object,event,function);' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_bind",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_bind' style='display:none'>
            <pre style='padding-left:25px'><code>
            $.bind = function(obj, ev, f) {
            if (!obj) return;
            if (!obj.__events) obj.__events = {};
            if (!$.isArray(ev)) ev = [ev];
            for (var i = 0; i &lt; ev.length; i++) {
                if (!obj.__events[ev[i]]) obj.__events[ev[i]] = [];
                obj.__events[ev[i]].push(f);
            }
        };
            </code></pre>
             </div>
      </div>
          <h2>$.bind(object,event,function);</h2>



          <section class='description'><p>Bind an event to an object instead of a DOM Node<br />                      $.bind(this,'event',function(){});<br />           </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>object - Object</li>
<li style='padding-left:15px;line-height:20px'>event - String</li>
<li style='padding-left:15px;line-height:20px'>function - Function</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.bind(object,eventfunction) works the same as $().bind, except you are binding events on JavaScript Objects.</p>

<p>We use this to bind events in the touchLayer and scrolling libraries.</p>

<p><code>$.bind($.touchLayer, 'orientationchange-reshape', orientationChangeProxy);</code></p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_trigger' title='$.trigger(object,event,argments);' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_trigger",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_trigger' style='display:none'>
            <pre style='padding-left:25px'><code>
            $.trigger = function(obj, ev, args) {
            if (!obj) return;
            var ret = true;
            if (!obj.__events) return ret;
            if (!$.isArray(ev)) ev = [ev];
            if (!$.isArray(args)) args = [];
            for (var i = 0; i &lt; ev.length; i++) {
                if (obj.__events[ev[i]]) {
                    var evts = obj.__events[ev[i]].slice(0);
                    for (var j = 0; j &lt; evts.length; j++)
                        if ($.isFunction(evts[j]) && evts[j].apply(obj, args) === false)
                            ret = false;
                }
            }
            return ret;
        };
            </code></pre>
             </div>
      </div>
          <h2>$.trigger(object,event,argments);</h2>



          <section class='description'><p>Trigger an event to an object instead of a DOM Node<br />                      $.trigger(this,'event',arguments);<br />           </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>object - Object</li>
<li style='padding-left:15px;line-height:20px'>event - String</li>
<li style='padding-left:15px;line-height:20px'>arguments - Array</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              
              </div>
             </div>
          </article>
       </div>

       <div id='$_unbind' title='$.unbind(object,event,function);' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_unbind",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_unbind' style='display:none'>
            <pre style='padding-left:25px'><code>
            $.unbind = function(obj, ev, f) {
            if (!obj.__events) return;
            if (!$.isArray(ev)) ev = [ev];
            for (var i = 0; i &lt; ev.length; i++) {
                if (obj.__events[ev[i]]) {
                    var evts = obj.__events[ev[i]];
                    for (var j = 0; j &lt; evts.length; j++) {
                        if (f == nundefined)
                            delete evts[j];
                        if (evts[j] == f) {
                            evts.splice(j, 1);
                            break;
                        }
                    }
                }
            }
        };
            </code></pre>
             </div>
      </div>
          <h2>$.unbind(object,event,function);</h2>



          <section class='description'><p>Unbind an event to an object instead of a DOM Node<br />                      $.unbind(this,'event',function(){});<br />           </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>object - Object</li>
<li style='padding-left:15px;line-height:20px'>event - String</li>
<li style='padding-left:15px;line-height:20px'>function - Function</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.bind(object,eventfunction) works the same as $().unbind, except you are unbinding events on JavaScript Objects.</p>

<p>The following will tell the $.touchLayer object to no longer respond to "orientationchange-reshape" events<br />
<code>$.unbind($.touchLayer, 'orientationchange-reshape', orientationChangeProxy);</code></p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_proxy' title='$.proxy(callback,context);' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_proxy",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_proxy' style='display:none'>
            <pre style='padding-left:25px'><code>
            $.proxy = function(f, c, args) {
            return function() {
                if (args) return f.apply(c, args); //use provided arguments
                return f.apply(c, arguments); //use scope function call arguments
            };
        };
            </code></pre>
             </div>
      </div>
          <h2>$.proxy(callback,context);</h2>



          <section class='description'><p>Creates a proxy function so you can change the 'this' context in the function<br />Update: now also allows multiple argument call or for you to pass your own arguments<br />           ```<br />            var newObj={foo:bar}<br />            $("#main").bind("click",$.proxy(function(evt){console.log(this)},newObj);</p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>Callback - Function</li>
<li style='padding-left:15px;line-height:20px'>Context - Object</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.proxy(callback,context) allows you to create a proxy function that changes the context of "this"</p>

<p>There are times where you want "this" to be something other then the object that the event or function is dispatched on.</p>

<pre><code class="language-js"><span class='linenumber'>var newObj={foo:bar}</span>
<span class='linenumber'>$("#main").bind("click",$.proxy(function(evt){console.log(this)},newObj);</span>
<span class='linenumber'>or</span>
<span class='linenumber'>( $.proxy(function(foo, bar){console.log(this+foo+bar)}, newObj) )('foo', 'bar');</span>
<span class='linenumber'>or</span>
<span class='linenumber'>( $.proxy(function(foo, bar){console.log(this+foo+bar)}, newObj, ['foo', 'bar']) )();</span>
</code></pre>

<p>Below we will have an anchor and proxy the click event so "this" is the object {foo:'bar'}</p>

<pre><code class="language-js"><span class='linenumber'>var obj={foo:'bar'}</span>
<span class='linenumber'>$("#proxyTest").bind("click",$.proxy(function(){alert(this.foo);},obj));</span>
</code></pre>

<p><input type="button" id="proxyTest" value="Test Proxy"></p>

<script>
var obj={foo:'bar'}
$("#proxyTest").bind("click",$.proxy(function(){alert(this.foo);},obj));
</script>

              </div>
             </div>
          </article>
       </div>

       <div id='$_cleanUpContent' title='$.cleanUpContent(node,itself,kill)' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_cleanUpContent",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_cleanUpContent' style='display:none'>
            <pre style='padding-left:25px'><code>
            $.cleanUpContent = function(node, itself, kill) {
            if (!node) return;
            //cleanup children
            var cn = node.childNodes;
            if (cn && cn.length &gt; 0) {
                //destroy everything in a few ms to avoid memory leaks
                //remove them all and copy objs into new array
                $.asap(cleanUpAsap, {}, [slice.apply(cn, [0]), kill]);
            }
            //cleanUp this node
            if (itself) cleanUpNode(node, kill);
        };

        // Like setTimeout(fn, 0); but much faster
        var timeouts = [];
        var contexts = [];
        var params = [];
            </code></pre>
             </div>
      </div>
          <h2>$.cleanUpContent(node,itself,kill)</h2>



          <section class='description'><p>Function to clean up node content to prevent memory leaks<br />                      $.cleanUpContent(node,itself,kill)<br />           </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>node - HTMLNode</li>
<li style='padding-left:15px;line-height:20px'>kill - Bool</li>
<li style='padding-left:15px;line-height:20px'>Kill - bool</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.cleanUpContent(node,[itself],[kill]) traverses through the dom and tries to de-regster any event listeners to prevent memory leaks.</p>

<p>This is called internally by $().html() and $().empty().  It does slow down those operations, but the gain is worth it.</p>

<p>Below is the code for $().html() to show how we use it</p>

<pre><code class="language-js"><span class='linenumber'>html: function (html, cleanup) {</span>
<span class='linenumber'>    if (this.length === 0)</span>
<span class='linenumber'>        return this;</span>
<span class='linenumber'>    if (html ===nundefined)</span>
<span class='linenumber'>        return this[0].innerHTML;</span>
<span class='linenumber'>    for (var i = 0; i &lt; this.length; i++) {</span>
<span class='linenumber'>        if (cleanup !== false)</span>
<span class='linenumber'>            $.cleanUpContent(this[i], false, true);</span>
<span class='linenumber'>        if(isWin8)</span>
<span class='linenumber'>        {</span>
<span class='linenumber'>            MSApp.execUnsafeLocalFunction(function(){</span>
<span class='linenumber'>                this[i].innerHTML=html;</span>
<span class='linenumber'>            });</span>
<span class='linenumber'>        }</span>
<span class='linenumber'>        else</span>
<span class='linenumber'>            this[i].innerHTML = html;</span>
<span class='linenumber'>    }</span>
<span class='linenumber'>    return this;</span>
<span class='linenumber'>},</span>
</code></pre>

              </div>
             </div>
          </article>
       </div>

       <div id='$_parseJS' title='$.parseJS(content);' data-nav='nav_appframework' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_parseJS",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_parseJS' style='display:none'>
            <pre style='padding-left:25px'><code>
            var remoteJSPages = {};
        $.parseJS = function(div) {
            if (!div)
                return;
            if (typeof(div) == "string") {
                var elem = document.createElement("div");
                if (isWin8) {
                    MSApp.execUnsafeLocalFunction(function() {
                        elem.innerHTML = div;
                    });
                } else
                    elem.innerHTML = div;

                div = elem;
            }
            var scripts = div.getElementsByTagName("script");
            div = null;
            for (var i = 0; i &lt; scripts.length; i++) {
                if (scripts[i].src.length &gt; 0 && !remoteJSPages[scripts[i].src] && !isWin8) {
                    var doc = document.createElement("script");
                    doc.type = scripts[i].type;
                    doc.src = scripts[i].src;
                    document.getElementsByTagName('head')[0].appendChild(doc);
                    remoteJSPages[scripts[i].src] = 1;
                    doc = null;
                } else {
                    window['eval'](scripts[i].innerHTML);
                }
            }
        };
            </code></pre>
             </div>
      </div>
          <h2>$.parseJS(content);</h2>



          <section class='description'><p>this function executes javascript in HTML.<br />                      $.parseJS(content)<br />           </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>content - String|DOM</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.parseJS(content) - This executes javascript inside an HTML string.  This is usefull if you are performing an Ajax request that has JS inside that needs to be evaluated.  If there are any script tags, they get added to the head tag.</p>

<pre><code class="language-html"><span class='linenumber'>var str="&lt; script&gt;alert('hi')&lt; /script&gt;";</span>
<span class='linenumber'>$parseJS(str);</span>
</code></pre>

<p>Let's try the above</p>

<script>
function doParseJS(){
    var str="<"+"script>alert('hi')<"+"/script>";
    $.parseJS(str);
}
</script>

<p><input type="button" value="Parse JS" onclick="doParseJS()"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_setSideMenuWidth' title='$.ui.setSideMenuWidth' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_setSideMenuWidth",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_setSideMenuWidth' style='display:none'>
            <pre style='padding-left:25px'><code>
            setSideMenuWidth: function(width) {
            this.sideMenuWidth = width;
            //override the css style
            width = width + "";
            width = width.replace("px", "") + "px";
            $("head").find("#styleWidth").remove();
            $("head").append("&lt;style id='styleWidth'&gt;#afui #menu {width:" + width + "  !important}&lt;/style&gt;");
        },
            </code></pre>
             </div>
      </div>
          <h2>$.ui.setSideMenuWidth</h2>



          <section class='description'><p>This changes the side menu width</p>

           $.ui.setSideMenuWidth('300px');
           </section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol></ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.ui.setSideMenuWidth(width) - This is a new API for 2.0.  This allows you to programatically set the width of your side menu.</p>

<p>This overrides the default CSS style.  This is used for animation and swiping to reveal.</p>

<pre><code class="language-js"><span class='linenumber'>$.ui.setSideMenuWidth("200px"); //static 200px</span>
</code></pre>

<p>Here we will set the width so only 50px of the main screen is available</p>

<pre><code class="language-js"><span class='linenumber'>$.ui.setSideMenuWidth(($("#content").width()-50)+"px");</span>
</code></pre>

              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_disableNativeScrolling' title='$.ui.disableNativeScrolling' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_disableNativeScrolling",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_disableNativeScrolling' style='display:none'>
            <pre style='padding-left:25px'><code>
            disableNativeScrolling: function() {
            $.feat.nativeTouchScroll = false;
        },
            </code></pre>
             </div>
      </div>
          <h2>$.ui.disableNativeScrolling</h2>



          <section class='description'><p>this will disable native scrolling on iOS</p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol></ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.ui.disableNativeScrolling() - this must be called before $.ui.launch happens.</p>

<p>This will disable native scrolling on iOS5+ globally and force javascript scrolling.</p>

<pre><code class="language-js"><span class='linenumber'>$.ui.disableNativeScrolling();</span>
</code></pre>

              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_manageHistory' title='$.ui.manageHistory' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_manageHistory",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_manageHistory' style='display:none'>
            <pre style='padding-left:25px'><code>
            manageHistory: true,
            </code></pre>
             </div>
      </div>
          <h2>$.ui.manageHistory</h2>



          <section class='description'><p>This is a boolean property.   When set to true, we manage history and update the hash<br />                    $.ui.manageHistory=false;//Don't manage for apps using Backbone<br />          </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol></ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.ui.manageHistory - This is a boolean property.  The default is true.  When this is true, we manage history internally and update the hash.</p>

<p>When set to false, we do not manage history/hash.  This is useful for some frameworks like Backbone.js</p>

<p>This should be set before $.ui.launch is executed.</p>

<pre><code class="language-js"><span class='linenumber'>$.ui.manageHistory=false;</span>
</code></pre>

              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_loadDefaultHash' title='$.ui.loadDefaultHash' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_loadDefaultHash",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_loadDefaultHash' style='display:none'>
            <pre style='padding-left:25px'><code>
            loadDefaultHash: true,
            </code></pre>
             </div>
      </div>
          <h2>$.ui.loadDefaultHash</h2>



          <section class='description'><p>This is a boolean property.  When set to true (default) it will load that panel when the app is started<br />                      $.ui.loadDefaultHash=false; //Never load the page from the hash when the app is started<br />           $.ui.loadDefaultHash=true; //Default<br />           </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol></ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.ui.loadDefaultHash is a boolean value you set before $.ui.launch happens.  This tells the browser to load the first panel off the hash/URL being loaded.</p>

<pre><code class="language-js"><span class='linenumber'>$.ui.loadDefaultHash=true;</span>
<span class='linenumber'>$.ui.launch();</span>
</code></pre>

<p>Look at the URL above, you should see the hash "#$.ui.loadDefaultHash" .  That is the ID for this panel.  If you reload the page, you will be taken back here, instead of the main panel.</p>

<p><a href="javascript:document.location.reload()" class="button">Reload the page</a></p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_useAjaxCacheBuster' title='$.ui.useAjaxCacheBuster' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_useAjaxCacheBuster",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_useAjaxCacheBuster' style='display:none'>
            <pre style='padding-left:25px'><code>
            useAjaxCacheBuster: false,
            </code></pre>
             </div>
      </div>
          <h2>$.ui.useAjaxCacheBuster</h2>



          <section class='description'><p>This is a boolean that when set to true will add "&amp;cache=rand" to any ajax loaded link<br />           The default is false<br />                      $.ui.useAjaxCacheBuster=true;<br />           </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol></ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.ui.useAjaxCacheBuster - when set to true, any anchor links that are ajax reqeusts to panels will add a "cache buster" parameter to block the browser from caching the request.</p>

<pre><code class="language-js"><span class='linenumber'>$.ui.useAjaxCacheBuster=true;</span>
</code></pre>

              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_actionsheet' title='$.ui.actionsheet()' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_actionsheet",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_actionsheet' style='display:none'>
            <pre style='padding-left:25px'><code>
            actionsheet: function(opts) {
            return $.query("#afui").actionsheet(opts);
        },
            </code></pre>
             </div>
      </div>
          <h2>$.ui.actionsheet()</h2>



          <section class='description'><p>This is a shorthand call to the $.actionsheet plugin.  We wire it to the afui div automatically<br />                      $.ui.actionsheet("Settings Logout")<br />           $.ui.actionsheet("[{<br />                        text: 'back',<br />                        cssClasses: 'red',<br />                        handler: function () { $.ui.goBack(); ; }<br />                    }, {<br />                        text: 'show alert 5',<br />                        cssClasses: 'blue',<br />                        handler: function () { alert("hi"); }<br />                    }, {<br />                        text: 'show alert 6',<br />                        cssClasses: '',<br />                        handler: function () { alert("goodbye"); }<br />                    }]");<br />           </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>links - String|Array</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.ui.actionsheet is a shortcut to the action sheet plugin.</p>

<pre><code class="language-html"><span class='linenumber'>$.ui.actionsheet("&lt;a href='javascript:;' class='button'&gt;Settings&lt;/a&gt; &lt;a href='javascript:;' class='button red'&gt;Logout&lt;/a&gt;")</span>
</code></pre>

<p>Let's try it below</p>

<script>
function doAS(){
    $.ui.actionsheet("<a href='javascript:;' class='button'>Settings</a> <a href='javascript:;' class='button red'>Logout</a>")
}
</script>

<p><input type="button" value="Test" onclick="doAS()"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_popup' title='$.ui.popup(opts)' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_popup",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_popup' style='display:none'>
            <pre style='padding-left:25px'><code>
            popup: function(opts) {
            return $.query("#afui").popup(opts);
        },
            </code></pre>
             </div>
      </div>
          <h2>$.ui.popup(opts)</h2>



          <section class='description'><p>This is a wrapper to $.popup.js plugin.  If you pass in a text string, it acts like an alert box and just gives a message<br />                      $.ui.popup(opts);<br />           $.ui.popup( {<br />                        title:"Alert! Alert!",<br />                        message:"This is a test of the emergency alert system!! Don't PANIC!",<br />                        cancelText:"Cancel me",<br />                        cancelCallback: function(){console.log("cancelled");},<br />                        doneText:"I'm done!",<br />                        doneCallback: function(){console.log("Done for!");},<br />                        cancelOnly:false<br />                      });<br />           $.ui.popup('Hi there');<br />           </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>options - Object|String</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.ui.popup is a wrapper to the popup plugin.</p>

<p>Below are two examples</p>

<pre><code class="language-js"><span class='linenumber'>$.ui.popup('Hi there');</span>
<span class='linenumber'>$.ui.popup( {</span>
<span class='linenumber'>    title:"Alert! Alert!",</span>
<span class='linenumber'>    message:"This is a test of the emergency alert system!! Don't PANIC!",</span>
<span class='linenumber'>    cancelText:"Cancel me",</span>
<span class='linenumber'>    cancelCallback: function(){console.log("cancelled");},</span>
<span class='linenumber'>    doneText:"I'm done!",</span>
<span class='linenumber'>    doneCallback: function(){console.log("Done for!");},</span>
<span class='linenumber'>    cancelOnly:false</span>
<span class='linenumber'>});</span>
</code></pre>

<p>Let's try them below.</p>

<script>
function popup1(){
$.ui.popup('Hi there');

}

function popup2(){
$.ui.popup( {
    title:"Alert! Alert!",
    message:"This is a test of the emergency alert system!! Don't PANIC!",
    cancelText:"Cancel me",
    cancelCallback: function(){console.log("cancelled");},
    doneText:"I'm done!",
    doneCallback: function(){console.log("Done for!");},
    cancelOnly:false
});
}
</script>

<p><input type="button" value="Popup 1" onclick="popup1()"></p>

<p><input type="button" value="Popup 2" onclick="popup2()"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_blockUI' title='$.ui.blockUI(opacity)' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_blockUI",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_blockUI' style='display:none'>
            <pre style='padding-left:25px'><code>
            blockUI: function(opacity) {
            $.blockUI(opacity);
        },
            </code></pre>
             </div>
      </div>
          <h2>$.ui.blockUI(opacity)</h2>



          <section class='description'><p>This will throw up a mask and block the UI<br />                  $.ui.blockUI(.9)<br />         `</p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>opacity - Float</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.ui.blockUI is a shortcut to $.blockUI from the popup plugin.</p>

<p>This function throws up a mask on the screen and is used with plugins like the popup plugin.</p>

<pre><code><span class='linenumber'>$.ui.blockUI(0.9)</span>
</code></pre>

<p>Let's try it below.  We will hide it after 3 seconds.</p>

<script>
function blockUI(){
    $.ui.blockUI(0.3);

    setTimeout(function(){
        $.ui.unblockUI()
    },3000);
}
</script>

<p><input type="button" value="Block UI" onclick="blockUI()"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_unblockUI' title='$.ui.unblockUI()' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_unblockUI",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_unblockUI' style='display:none'>
            <pre style='padding-left:25px'><code>
            unblockUI: function() {
            $.unblockUI();
        },
            </code></pre>
             </div>
      </div>
          <h2>$.ui.unblockUI()</h2>



          <section class='description'><p>This will remove the UI mask<br />                  $.ui.unblockUI()<br />         `</p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol></ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.ui.unblockUI is a shortcut to $.unblockUI from the popup plugin.</p>

<p>This function clears the mask that was created by $.blockUI</p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_removeFooterMenu' title='$.ui.removeFooterMenu' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_removeFooterMenu",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_removeFooterMenu' style='display:none'>
            <pre style='padding-left:25px'><code>
            removeFooterMenu: function() {
            $.query("#navbar").hide();
            $.query("#content").css("bottom", "0px");
            this.showNavMenu = false;
        },
            </code></pre>
             </div>
      </div>
          <h2>$.ui.removeFooterMenu</h2>



          <section class='description'><p>Will remove the bottom nav bar menu from your application<br />                      $.ui.removeFooterMenu();<br />           </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol></ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.ui.removeFooterMenu will remove the footer from your application for every page.</p>

<pre><code class="language-js"><span class='linenumber'>$.ui.removeFooterMenu();</span>
</code></pre>

<p>You can try it below, but you will loose the footer and have to reload the page.</p>

<p><input type="button" value="Remove Footer" onclick="$.ui.removeFooterMenu()"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_autoLaunch' title='$.ui.autoLaunch' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_autoLaunch",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_autoLaunch' style='display:none'>
            <pre style='padding-left:25px'><code>
            autoLaunch: true,
            </code></pre>
             </div>
      </div>
          <h2>$.ui.autoLaunch</h2>



          <section class='description'><p>Boolean if you want to auto launch afui<br />           ```<br />           $.ui.autoLaunch = false; //</p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol></ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.ui.autoLaunch when set to true, your app will launch as soon as possible (after the document is ready).</p>

<p>If you need to run logic before launching the app, set $.ui.autoLaunch to false and call $.ui.launch() manually.</p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_showBackButton' title='$.ui.showBackButton' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_showBackButton",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_showBackButton' style='display:none'>
            <pre style='padding-left:25px'><code>
            showBackbutton: true, // Kept for backward compatibility.
        showBackButton: true,
            </code></pre>
             </div>
      </div>
          <h2>$.ui.showBackButton</h2>



          <section class='description'><p>Boolean if you want to show the back button<br />           ```<br />           $.ui.showBackButton = false; //</p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol></ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.ui.showBackButton .  When set to false before your app starts, this will always hide the back button.</p>

<pre><code><span class='linenumber'>$.ui.showBackButton=false;</span>
</code></pre>

              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_backButtonText' title='$.ui.backButtonText' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_backButtonText",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_backButtonText' style='display:none'>
            <pre style='padding-left:25px'><code>
            backButtonText: "",
            </code></pre>
             </div>
      </div>
          <h2>$.ui.backButtonText</h2>



          <section class='description'><p>Override the back button text<br />                        $.ui.backButtonText="Back"<br />            </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol></ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.ui.backButtonText will override the back button text everywhere in the application.</p>

<pre><code class="language-js"><span class='linenumber'>$.ui.backButtonText='Back';</span>
</code></pre>

              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_resetScrollers' title='$.ui.resetScrollers' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_resetScrollers",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_resetScrollers' style='display:none'>
            <pre style='padding-left:25px'><code>
            resetScrollers: true,
            </code></pre>
             </div>
      </div>
          <h2>$.ui.resetScrollers</h2>



          <section class='description'><p>Boolean if you want to reset the scroller position when navigating panels.  Default is true<br />                      $.ui.resetScrollers=false; //Do not reset the scrollers when switching panels<br />           </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol></ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.ui.resetScrollers - when set to true, the scrollers will always revert to the top of the page when you load a new panel.</p>

<pre><code class="language-js"><span class='linenumber'>$.ui.resetScrollers=false; //Do not reset the scrolling position</span>
</code></pre>

              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_ready' title='$.ui.ready' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_ready",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_ready' style='display:none'>
            <pre style='padding-left:25px'><code>
            ready: function(param) {

            if (this.launchCompleted) param();
            else {
                $(document).on("afui:ready", function(e) {
                    param();
                });
            }
        },
            </code></pre>
             </div>
      </div>
          <h2>$.ui.ready</h2>



          <section class='description'><p>function to fire when afui is ready and completed launch<br />                      $.ui.ready(function(){console.log('afui is ready');});<br />           </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>function - Function</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.ui.ready - this is similar to $(document).ready but fires after App Framework UI has launched.</p>

<p>If you use data-defer to load content, this launches AFTER all data-defer files are loaded.</p>

<p>If the event has already dispatched and you create a $.ui.ready function, it will execute right away.</p>

<pre><code class="language-js"><span class='linenumber'>$.ui.ready(function(){</span>
<span class='linenumber'>    //App is ready lets check if a user exists.</span>
<span class='linenumber'>    if(user===false)</span>
<span class='linenumber'>       return $.ui.loadContent("#login");</span>
<span class='linenumber'>    else</span>
<span class='linenumber'>        return $.ui.loadContent("#main");</span>
<span class='linenumber'>});</span>
</code></pre>

              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_setBackButtonStyle' title='$.ui.setBackButtonStyle(class)' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_setBackButtonStyle",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_setBackButtonStyle' style='display:none'>
            <pre style='padding-left:25px'><code>
            setBackButtonStyle: function(className) {
            $.query("#backButton").replaceClass(null, className);
        },
            </code></pre>
             </div>
      </div>
          <h2>$.ui.setBackButtonStyle(class)</h2>



          <section class='description'><p>Override the back button class name<br />                      $.ui.setBackButtonStyle('newClass');<br />           </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>new - String</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.ui.setBackButtonStyle this function will override the back button styles with whatever style you want.</p>

<p>By default, the class is "button".</p>

<pre><code class="language-js"><span class='linenumber'>$.ui.setBackButtonStyle("myCustomClass");</span>
</code></pre>

              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_goBack' title='$.ui.goBack()' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_goBack",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_goBack' style='display:none'>
            <pre style='padding-left:25px'><code>
            goBack: function(delta) {
            delta = Math.min(Math.abs(~~delta || 1), this.history.length);

            if (delta) {
                var tmpEl = this.history.splice(-delta).shift();
                this.loadContent(tmpEl.target + "", 0, 1, tmpEl.transition);
                this.transitionType = tmpEl.transition;
                this.updateHash(tmpEl.target);
            }
        },
            </code></pre>
             </div>
      </div>
          <h2>$.ui.goBack()</h2>



          <section class='description'><p>Initiate a back transition<br />                      $.ui.goBack()<br />           </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>[delta=1] - Number</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.ui.goBack() sends the user back one page in the history stack.</p>

<p>This is the same as clicking the back button.</p>

<pre><code class="language-js"><span class='linenumber'>$.ui.goBack();</span>
</code></pre>

<p>Try it below.</p>

<p><input type="button" value="Go Back" onclick="$.ui.goBack()"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_clearHistory' title='$.ui.clearHistory()' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_clearHistory",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_clearHistory' style='display:none'>
            <pre style='padding-left:25px'><code>
            clearHistory: function() {
            this.history = [];
            this.setBackButtonVisibility(false);
        },
            </code></pre>
             </div>
      </div>
          <h2>$.ui.clearHistory()</h2>



          <section class='description'><p>Clear the history queue<br />                      $.ui.clearHistory()<br />           </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol></ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.ui.clearHistory() will clear the history queue.  This will remove the back button from the header until a new page is loaded.</p>

<pre><code class="language-js"><span class='linenumber'>$.ui.clearHistory();</span>
</code></pre>

<p>Try it below.</p>

<p><input type="button" Value="Clear History" onclick="$.ui.clearHistory()"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_updateBadge' title='$.ui.updateBadge(target,value,[position],[color])' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_updateBadge",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_updateBadge' style='display:none'>
            <pre style='padding-left:25px'><code>
            updateBadge: function(target, value, position, color) {
            if (position === undefined) position = "";

            var $target = $(target);
            var badge = $target.find("span.af-badge");

            if (badge.length === 0) {
                if ($target.css("position") != "absolute") $target.css("position", "relative");
                badge = $.create("span", {
                    className: "af-badge " + position,
                    html: value
                });
                $target.append(badge);
            } else badge.html(value);
            badge.removeClass("tl bl br tr");
            badge.addClass(position);
            if (color === undefined)
                color = "red";
            if ($.isObject(color)) {
                badge.css(color);
            } else if (color) {
                badge.css("background", color);
            }
            badge.data("ignore-pressed", "true");

        },
            </code></pre>
             </div>
      </div>
          <h2>$.ui.updateBadge(target,value,[position],[color])</h2>



          <section class='description'><p>Update a badge on the selected target.  Position can be<br />            bl = bottom left<br />            tl = top left<br />            br = bottom right<br />            tr = top right (default)<br />                      $.ui.updateBadge('#mydiv','3','bl','green');<br />           </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>target - String</li>
<li style='padding-left:15px;line-height:20px'>Value - String</li>
<li style='padding-left:15px;line-height:20px'>[position] - String</li>
<li style='padding-left:15px;line-height:20px'>[color - String|Object</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.ui.updateBadge - creates or updates a badge.</p>

<p>If the badge does not exist, it will create it.  If it does exist, it will update it with the new options.</p>

<pre><code class="language-js"><span class='linenumber'>$.ui.updateBadge("#myTest","3","tl",); //Badge will appear on the top left</span>
<span class='linenumber'>$.ui.updateBadge("#myTest","5","bl","blue"); //Badge will appear on the bottom left with a blue background</span>
</code></pre>

<p>Let's update the badge below</p>

<script>
function badge1(){
    $.ui.updateBadge($("#badgeTest li").get(0),"3","tl");
}

function badge2(){
    $.ui.updateBadge($("#badgeTest li").get(0),"5","bl","blue");
}
</script>

<ul class="list" id="badgeTest">
    <li>Test</li>
</ul>

<p><input type="button" value="Badge 3" onclick="badge1()"></p>

<p><input type="button" value="Badge 5" onclick="badge2()"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_removeBadge' title='$.ui.removeBadge(target)' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_removeBadge",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_removeBadge' style='display:none'>
            <pre style='padding-left:25px'><code>
            removeBadge: function(target) {
            $(target).find("span.af-badge").remove();
        },
            </code></pre>
             </div>
      </div>
          <h2>$.ui.removeBadge(target)</h2>



          <section class='description'><p>Removes a badge from the selected target.<br />                      $.ui.removeBadge('#mydiv');<br />           </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>target - String</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.ui.removeBadge removes a badge that was created with $.ui.updateBadge</p>

<pre><code class="language-js"><span class='linenumber'>$.ui.removeBadge("#myListTest li");</span>
</code></pre>

<ul id="myListTest" class="list">
    <li>One</li>
</ul>

<script>
function addBadge(){
    $.ui.updateBadge($("#myListTest li"),"4");
}

function removeBadge() {
    $.ui.removeBadge($("#myListTest li"));
}

</script>

<p><input type="button" value="Add Badge" onclick="addBadge()"></p>

<p><input type="button" value="Remove Badge" onclick="removeBadge()"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_toggleNavMenu' title='$.ui.toggleNavMenu([force])' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_toggleNavMenu",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_toggleNavMenu' style='display:none'>
            <pre style='padding-left:25px'><code>
            toggleNavMenu: function(force) {
            if (!this.showNavMenu) return;
            if ($.query("#navbar").css("display") != "none" && ((force !== undefined && force !== true) || force === undefined)) {
                $.query("#content").css("bottom", "0px");
                $.query("#navbar").hide();
            } else if (force === undefined || (force !== undefined && force === true)) {
                $.query("#navbar").show();
                $.query("#content").css("bottom", $.query("#navbar").css("height"));

            }
        },
            </code></pre>
             </div>
      </div>
          <h2>$.ui.toggleNavMenu([force])</h2>



          <section class='description'><p>Toggles the bottom nav menu.  Force is a boolean to force show or hide.<br />                      $.ui.toggleNavMenu();//toggle it<br />           $.ui.toggleNavMenu(true); //force show it<br />           </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>[force] - Boolean</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.ui.toggleNavMenu(force) - will toggle the nav (footer) menu for your app.</p>

<p>If you specify false for "force", it will always hide the navbar.</p>

<p>If you specify true for "force", it will always show the navbar.</p>

<p><input type="button" onclick="$.ui.toggleNavMenu()" value="Toggle"> <input type="button" onclick="$.ui.toggleNavMenu(false)" value="Hide"> <input type="button" onclick="$.ui.toggleNavMenu(true)" value="Show"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_toggleHeaderMenu' title='$.ui.toggleHeaderMenu([force])' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_toggleHeaderMenu",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_toggleHeaderMenu' style='display:none'>
            <pre style='padding-left:25px'><code>
            toggleHeaderMenu: function(force) {
            if ($.query("#header").css("display") != "none" && ((force !== undefined && force !== true) || force === undefined)) {
                $.query("#content").css("top", "0px");
                $.query("#header").hide();
            } else if (force === undefined || (force !== undefined && force === true)) {
                $.query("#header").show();
                $.query("#content").css("top", $.query("#header").css("height"));
            }
        },
            </code></pre>
             </div>
      </div>
          <h2>$.ui.toggleHeaderMenu([force])</h2>



          <section class='description'><p>Toggles the top header menu.  Force is a boolean to force show or hide.<br />                      $.ui.toggleHeaderMenu();//toggle it<br />           </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>[force] - Boolean</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.ui.toggleHeaderMenu(force) - will toggle the header menu for your app.</p>

<p>If you specify false for "force", it will always hide the header.</p>

<p>If you specify true for "force", it will always show the header.</p>

<p><input type="button" onclick="$.ui.toggleHeaderMenu()" value="Toggle"> <input type="button" onclick="$.ui.toggleHeaderMenu(false)" value="Hide"> <input type="button" onclick="$.ui.toggleHeaderMenu(true)" value="Show"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_toggleSideMenu' title='$.ui.toggleSideMenu([force],[callback],[time])' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_toggleSideMenu",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_toggleSideMenu' style='display:none'>
            <pre style='padding-left:25px'><code>
            toggleSideMenu: function(force, callback, time) {
            if (!this.isSideMenuEnabled() || this.togglingSideMenu) return;

            var that = this;
            var menu = $.query("#menu");
            var els = $.query("#content,  #header, #navbar");
            time = time || this.transitionTime;
            var open = this.isSideMenuOn();

            if (force === 2 || (!open && ((force !== undefined && force !== false) || force === undefined))) {
                this.togglingSideMenu = true;
                menu.show();
                that.css3animate(els, {
                    x: that.sideMenuWidth,
                    time: time,
                    complete: function(canceled) {
                        that.togglingSideMenu = false;
                        els.vendorCss("Transition", "");
                        if (callback) callback(canceled);
                    }
                });

            } else if (force === undefined || (force !== undefined && force === false)) {
                this.togglingSideMenu = true;
                that.css3animate(els, {
                    x: "0px",
                    time: time,
                    complete: function(canceled) {
                        // els.removeClass("on");
                        els.vendorCss("Transition", "");
                        els.vendorCss("Transform", "");
                        that.togglingSideMenu = false;
                        if (callback) callback(canceled);
                        menu.hide();
                    }
                });
            }
        },
            </code></pre>
             </div>
      </div>
          <h2>$.ui.toggleSideMenu([force],[callback],[time])</h2>



          <section class='description'><p>Toggles the side menu.  Force is a boolean to force show or hide.<br />                      $.ui.toggleSideMenu();//toggle it<br />           </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>[force] - Boolean</li>
<li style='padding-left:15px;line-height:20px'>[callback] - Function</li>
<li style='padding-left:15px;line-height:20px'>[time] - int</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.ui.toggleSideMenu(force) - will toggle the Side menu for your app.</p>

<p><strong>note</strong> On tablets and desktops, we always show the side menu so resize your browser to test this.</p>

<p>If you specify false for "force", it will always hide the Side Menu.</p>

<p>If you specify true for "force", it will always show the Side Menu.</p>

<p><input type="button" onclick="$.ui.toggleSideMenu()" value="Toggle"> <input type="button" onclick="$.ui.toggleSideMenu(false)" value="Hide"> <input type="button" onclick="$.ui.toggleSideMenu(true)" value="Show"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_disableSideMenu' title='$.ui.disableSideMenu();' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_disableSideMenu",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_disableSideMenu' style='display:none'>
            <pre style='padding-left:25px'><code>
            disableSideMenu: function() {
            var that = this;
            var els = $.query("#content, #header, #navbar");
            if (this.isSideMenuOn()) {
                this.toggleSideMenu(false, function(canceled) {
                    if (!canceled) els.removeClass("hasMenu");
                });
            } else els.removeClass("hasMenu");
            $.query("#menu").removeClass("tabletMenu");
        },
            </code></pre>
             </div>
      </div>
          <h2>$.ui.disableSideMenu();</h2>



          <section class='description'><p>Disables the side menu<br />                      $.ui.disableSideMenu();<br />           </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol></ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.ui.disableSideMenu() will disable/remove the side menu for your app.</p>

<p>This function removes the special class ".hasMenu" and hides the side menu.</p>

<p>Try it below, but you will have to reload the page to get the side menu back.</p>

<p><input type="button" onclick="$.ui.disableSideMenu()" value="Disable Side Menu"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_enableSideMenu' title='$.ui.enableSideMenu();' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_enableSideMenu",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_enableSideMenu' style='display:none'>
            <pre style='padding-left:25px'><code>
            enableSideMenu: function() {
            $.query("#content, #header, #navbar").addClass("hasMenu");
            $.query("#menu").addClass("tabletMenu");
        },
            </code></pre>
             </div>
      </div>
          <h2>$.ui.enableSideMenu();</h2>



          <section class='description'><p>Enables the side menu if it has been disabled<br />                      $.ui.enableSideMenu();<br />           </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol></ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.ui.enableSideMenu() will enable/add the side menu for your app.</p>

<p>This function adds the special class ".hasMenu" and enables the side menu.</p>

<p><input type="button" onclick="$.ui.disableSideMenu()" value="Disable Side Menu"></p>

<p><input type="button" onclick="$.ui.enableSideMenu()" value="Enable Side Menu"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_updateNavbarElements' title='$.ui.updateNavbarElements(Elements)' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_updateNavbarElements",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_updateNavbarElements' style='display:none'>
            <pre style='padding-left:25px'><code>
            updateNavbarElements: function(elems) {
            if (this.prevFooter) {
                if (this.prevFooter.data("parent")) this.prevFooter.appendTo("#" + this.prevFooter.data("parent"));
                else this.prevFooter.appendTo("#afui");
            }
            if (!$.is$(elems)) //inline footer
            {
                elems = $.query("#" + elems);
            }
            $.query("#navbar").append(elems);
            this.prevFooter = elems;
            var tmpAnchors = $.query("#navbar a");
            if (tmpAnchors.length &gt; 0) {
                tmpAnchors.data("ignore-pressed", "true").data("resetHistory", "true");
                var width = parseFloat(100 / tmpAnchors.length);
                tmpAnchors.css("width", width + "%");
            }
            var nodes = $.query("#navbar footer");
            if (nodes.length === 0) return;
            nodes = nodes.get(0).childNodes;

            for (var i = 0; i &lt; nodes.length; i++) {
                if (nodes[i].nodeType === 3) {
                    nodes[i].parentNode.removeChild(nodes[i]);
                }
            }

        },
            </code></pre>
             </div>
      </div>
          <h2>$.ui.updateNavbarElements(Elements)</h2>



          <section class='description'><p>Updates the elements in the navbar<br />                      $.ui.updateNavbarElements(elements);<br />           </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>Elements - String|Object</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.ui.updateNavbarElements(elements) will update the navbar (footer) with the elements passed in</p>

<p>This expects a &lt;footer> as the container with all the elements in it.</p>

<pre><code class="language-html"><span class='linenumber'>&lt;footer id="myTestFooter"&gt;</span>
<span class='linenumber'>    &lt;a href="#af_ui" class="icon pencil"&gt;af.ui&lt;/a&gt;&lt;a href="#appframework" class="icon bug"&gt;appframework&lt;/a&gt;</span>
<span class='linenumber'>&lt;/footer&gt;</span>
</code></pre>

<pre><code class="language-js"><span class='linenumber'>$.ui.updateNavbarElements($("#myTestFooter"));</span>
</code></pre>

<p>Let's try it below</p>

<script>

$(afui).ready(function(){
    $("#afui").append('<footer id="myTestFooter"><a href="#af_ui" class="icon pencil">af.ui</a><a href="#appframework" class="icon bug">appframework</a></footer>');
});
</script>

<p><input type="button" value="Update Navbar" onclick='$.ui.updateNavbarElements($("#myTestFooter"));'></p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_updateHeaderElements' title='$.ui.updateHeaderElements(Elements)' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_updateHeaderElements",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_updateHeaderElements' style='display:none'>
            <pre style='padding-left:25px'><code>
            updateHeaderElements: function(elems, goBack) {
            var that = this;
            if (!$.is$(elems)) //inline footer
            {
                elems = $.query("#" + elems);
            }
            if (elems == this.prevHeader) return;
            this._currentHeaderID=elems.prop("id");
            if (this.prevHeader) {
                //Let's slide them out
                $.query("#header").append(elems);
                //Do not animate - sometimes they act funky
                if (!$.ui.animateHeaders) {
                    if (that.prevHeader.data("parent")) that.prevHeader.appendTo("#" + that.prevHeader.data("parent"));
                    else that.prevHeader.appendTo("#afui");
                    that.prevHeader = elems;
                    return;
                }

                var from = goBack ? "100px" : "-100px";
                var to = goBack ? "-100px" : "100px";
                that.prevHeader.addClass("ignore");
                that.css3animate(elems, {
                    x: to,
                    opacity: 0.3,
                    time: "1ms"
                });
                that.css3animate(that.prevHeader, {
                    x: from,
                    y: 0,
                    opacity: 0.3,
                    time: that.transitionTime,
                    delay: numOnly(that.transitionTime) / 5 + "ms",
                    complete: function() {
                        if (that.prevHeader.data("parent")) that.prevHeader.appendTo("#" + that.prevHeader.data("parent"));
                        else that.prevHeader.appendTo("#afui");
                        that.prevHeader.removeClass("ignore");
                        that.css3animate(that.prevHeader, {
                            x: to,
                            opacity: 1,
                            time: "1ms"
                        });
                        that.prevHeader = elems;
                    }
                });
                that.css3animate(elems, {
                    x: "0px",
                    opacity: 1,
                    time: that.transitionTime
                });


            } else {
                $.query("#header").append(elems);
                this.prevHeader = elems;
            }
        },
            </code></pre>
             </div>
      </div>
          <h2>$.ui.updateHeaderElements(Elements)</h2>



          <section class='description'><p>Updates the elements in the header<br />                      $.ui.updateHeaderElements(elements);<br />           </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>Elements - String|Object</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              
              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_updateSideMenuElements' title='$.ui.updateSideMenuElements(Elements)' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_updateSideMenuElements",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_updateSideMenuElements' style='display:none'>
            <pre style='padding-left:25px'><code>
            updateSideMenuElements: function(elems) {
            var that = this;
            if (elems === undefined || elems === null) return;
            var nb = $.query("#menu_scroller");

            if (this.prevMenu) {
                this.prevMenu.insertBefore("#afui #menu");
                this.prevMenu = null;
            }

            if (!$.is$(elems)) elems = $.query("#" + elems);

            nb.html('');
            nb.append(elems);
            this.prevMenu = elems;
            //Move the scroller to the top and hide it
            this.scrollingDivs.menu_scroller.hideScrollbars();
            this.scrollingDivs.menu_scroller.scrollToTop();
        },
            </code></pre>
             </div>
      </div>
          <h2>$.ui.updateSideMenuElements(Elements)</h2>



          <section class='description'><p>Updates the elements in the side menu<br />                      $.ui.updateSideMenuElements(elements);<br />           </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>Elements - String|Object</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.ui.updateSideMenuElements(elements) will update the side menu with the elements passed in</p>

<pre><code class="language-html"><span class='linenumber'>&lt;nav id="myTestSideMenu"&gt;</span>
<span class='linenumber'>    &lt;ul class="list"&gt;</span>
<span class='linenumber'>        &lt;li&gt;&lt;a href="#af_ui" class="icon pencil"&gt;af.ui&lt;/a&gt;&lt;/li&gt;</span>
<span class='linenumber'>        &lt;li&gt;&lt;a href="#appframework" class="icon bug"&gt;appframework&lt;/a&gt;&lt;/li&gt;</span>
<span class='linenumber'>    &lt;/ul&gt;</span>
<span class='linenumber'>&lt;/nav&gt;</span>
</code></pre>

<pre><code class="language-js"><span class='linenumber'>$.ui.updateSideMenuElements($("#myTestSideMenu"));</span>
</code></pre>

<p>Let's try it below</p>

<script>

$(afui).ready(function(){
    $("#afui").append('<nav id="myTestSideMenu"><ul class="list"><li><a href="#af_ui" class="icon pencil">af.ui</a></li><li><a href="#appframework" class="icon bug">appframework</a></li></ul></nav>');
});
</script>

<p><input type="button" value="Update SideMenu" onclick='$.ui.updateSideMenuElements($("#myTestSideMenu"));'></p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_setTitle' title='$.ui.setTitle(value)' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_setTitle",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_setTitle' style='display:none'>
            <pre style='padding-left:25px'><code>
            setTitle: function(val) {
            if(this._currentHeaderID!=="defaultHeader") return;
            $.query("#header header:not(.ignore)  #pageTitle").html(val);
        },
            </code></pre>
             </div>
      </div>
          <h2>$.ui.setTitle(value)</h2>



          <section class='description'><p>Set the title of the current panel<br />                      $.ui.setTitle("new title");<br />           </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>value - String</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.ui.setTitle(title) will change the title for the current panel.</p>

<p>This expects a string and will udpate the &lt;h1> tag in the header with the value.</p>

<p><input type="button" value="Change Title" onclick="$.ui.setTitle('New Title');"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_setBackButtonText' title='$.ui.setBackButtonText(value)' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_setBackButtonText",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_setBackButtonText' style='display:none'>
            <pre style='padding-left:25px'><code>
            setBackButtonText: function(text) {
            if(this._currentHeaderID!=="defaultHeader") return;
            if (this.trimBackButtonText)
                text = text.substring(0, 5) + "...";
            if (this.backButtonText.length &gt; 0) $.query("#header header:not(.ignore) #backButton").html(this.backButtonText);
            else $.query("#header header:not(.ignore)  #backButton").html(text);
        },
            </code></pre>
             </div>
      </div>
          <h2>$.ui.setBackButtonText(value)</h2>



          <section class='description'><p>Override the text for the back button<br />                      $.ui.setBackButtonText("GO...");<br />           </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>value - String</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.ui.setBackButtonText(text)  - This will change the back button text for the current panel.</p>

<p>If you set $.ui.backButtonText (like this API doc does) , you can not use this function to change the back button text.</p>

<pre><code class="language-js"><span class='linenumber'>$.ui.setBackButtonText("Go Back");</span>
</code></pre>

              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_showMask' title='$.ui.showMask(text);' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_showMask",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_showMask' style='display:none'>
            <pre style='padding-left:25px'><code>
            showMask: function(text) {
            if (!text) text = this.loadingText || "";
            $.query("#afui_mask&gt;h1").html(text);
            $.query("#afui_mask").show();
        },
            </code></pre>
             </div>
      </div>
          <h2>$.ui.showMask(text);</h2>



          <section class='description'><p>Show the loading mask<br />                      $.ui.showMask()<br />           $.ui.showMask('Doing work')<br />           </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>[text] - String</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.ui.showMask(text) >This will show the loading mask. You can trigger this manually for long operations.</p>

<pre><code class="language-js"><span class='linenumber'>$.ui.showMask("Loading...");</span>
</code></pre>

<script>
function testShowMask(){
    $.ui.showMask("Loading...");
    setTimeout(function(){
        $.ui.hideMask();
    },2000);
}
</script>

<p><input type="button" value="Show Mask" onclick="testShowMask()"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_hideMask' title='$.ui.hideMask();' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_hideMask",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_hideMask' style='display:none'>
            <pre style='padding-left:25px'><code>
            hideMask: function() {
            $.query("#afui_mask").hide();
        },
            </code></pre>
             </div>
      </div>
          <h2>$.ui.hideMask();</h2>



          <section class='description'><p>Hide the loading mask</p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol></ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.ui.hideMask This will hide the loading mask.</p>

<pre><code class="language-js"><span class='linenumber'>$.ui.hideMask()</span>
</code></pre>

<p><input type="button" value="Show Mask" onclick="$.ui.showMask('Hide Mask Test')"></p>

<p><input type="button" value="Hide Mask" onclick="$.ui.hideMask()"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_showModal' title='$.ui.showModal();' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_showModal",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_showModal' style='display:none'>
            <pre style='padding-left:25px'><code>
            showModal: function(id, trans) {
            var that = this;
            this.modalTransition = trans || "up";
            var modalDiv = $.query("#modalContainer");
            if (typeof(id) === "string")
                id = "#" + id.replace("#", "");
            var $panel = $.query(id);
            if ($panel.length) {
                var useScroller = this.scrollingDivs.hasOwnProperty( $panel.attr("id") );
                modalDiv.html($.feat.nativeTouchScroll || !useScroller ? $.query(id).html() : $.query(id).get(0).childNodes[0].innerHTML + '', true);
                modalDiv.append("&lt;a onclick='$.ui.hideModal();' class='closebutton modalbutton'&gt;&lt;/a&gt;");
                that.modalWindow.style.display = "block";

                this.runTransition(this.modalTransition, that.modalTransContainer, that.modalWindow, false);

                if (useScroller) {
                    this.scrollingDivs.modal_container.enable(that.resetScrollers);
                }
                else {
                    this.scrollingDivs.modal_container.disable();
                }

                this.scrollToTop('modal');
                modalDiv.data("panel", id);
                var myPanel=$panel.get(0);
                var fnc = myPanel.getAttribute("data-load");
                if (typeof fnc == "string" && window[fnc]) {
                    window[fnc](myPanel);
                }
                $panel.trigger("loadpanel");

            }
        },
            </code></pre>
             </div>
      </div>
          <h2>$.ui.showModal();</h2>



          <section class='description'><p>Load a content panel in a modal window.  We set the innerHTML so event binding will not work.  Please use the data-load or panelloaded events to setup any event binding<br />                      $.ui.showModal("#myDiv","fade");<br />           </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>panel - String|Object</li>
<li style='padding-left:15px;line-height:20px'>[transition] - String</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.ui.showModal() will load a panel as a modal window (full overlay).</p>

<p>Because we use .html(), events are not registered.  Please use the data-load or "loadpanel" event to wire them for that modal window.</p>

<pre><code class="language-js"><span class='linenumber'>$.ui.showModal("#$.ui.showModal");</span>
</code></pre>

<p>Show this page as a modal window.</p>

<p><input type="button" onclick="$.ui.showModal('#$_ui_showModal')" value="Show Modal"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_hideModal' title='$.ui.hideModal();' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_hideModal",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_hideModal' style='display:none'>
            <pre style='padding-left:25px'><code>
            hideModal: function() {
            var self = this;
            $.query("#modalContainer").html("", true);

            this.runTransition(self.modalTransition, self.modalWindow, self.modalTransContainer, true);

            this.scrollingDivs.modal_container.disable();

            var tmp = $.query($.query("#modalContainer").data("panel"));
            var fnc = tmp.data("unload");
            if (typeof fnc == "string" && window[fnc]) {
                window[fnc](tmp.get(0));
            }
            tmp.trigger("unloadpanel");

        },
            </code></pre>
             </div>
      </div>
          <h2>$.ui.hideModal();</h2>



          <section class='description'><p>Hide the modal window and remove the content.  We remove any event listeners on the contents.<br />                      $.ui.hideModal("");<br />           </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol></ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              

              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_updatePanel' title='$.ui.updatePanel(id,content);' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_updatePanel",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_updatePanel' style='display:none'>
            <pre style='padding-left:25px'><code>
            updatePanel: function(id, content) {
            id = "#" + id.replace("#", "");
            var el = $.query(id).get(0);
            if (!el) return;

            var newDiv = $.create("div", {
                html: content
            });
            if (newDiv.children('.panel') && newDiv.children('.panel').length &gt; 0) newDiv = newDiv.children('.panel').get(0);
            else newDiv = newDiv.get(0);


            if (el.getAttribute("js-scrolling") && (el.getAttribute("js-scrolling").toLowerCase() == "yes" || el.getAttribute("js-scrolling").toLowerCase() == "true")) {
                $.cleanUpContent(el.childNodes[0], false, true);
                $(el.childNodes[0]).html(content);
            } else {
                $.cleanUpContent(el, false, true);
                $(el).html(content);
            }
            if (newDiv.getAttribute("data-title")) el.setAttribute("data-title",newDiv.getAttribute("data-title"));
        },
            </code></pre>
             </div>
      </div>
          <h2>$.ui.updatePanel(id,content);</h2>



          <section class='description'><p>Update the HTML in a content panel<br />                      $.ui.updatePanel("#myDiv","This is the new content");<br />           </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>panel - String|Object</li>
<li style='padding-left:15px;line-height:20px'>html - String</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.ui.updatePanel(id,content) will update the content of a panel.  You must use this due to JS scrollers requiring a wrapper div.</p>

<pre><code class="language-js"><span class='linenumber'>$.ui.updatePanel("#$_ui_updatePanel","This is new content");</span>
</code></pre>

<p>Try it below.  We will change the content of this panel.</p>

<p><input type="button" value="Change Content" onclick='$.ui.updatePanel("#$_ui_updatePanel","This is new content");'></p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_updateContentDiv' title='$.ui.updateContentDiv(id,content);' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_updateContentDiv",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_updateContentDiv' style='display:none'>
            <pre style='padding-left:25px'><code>
            updateContentDiv: function(id, content) {
            return this.updatePanel(id, content);
        },
            </code></pre>
             </div>
      </div>
          <h2>$.ui.updateContentDiv(id,content);</h2>



          <section class='description'><p>Same as $.ui.updatePanel.  kept for backwards compatibility<br />                      $.ui.updateContentDiv("#myDiv","This is the new content");<br />           </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>panel - String|Object</li>
<li style='padding-left:15px;line-height:20px'>html - String</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              
              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_addContentDiv' title='$.ui.addContentDiv(id,content,title);' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_addContentDiv",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_addContentDiv' style='display:none'>
            <pre style='padding-left:25px'><code>
            addContentDiv: function(el, content, title, refresh, refreshFunc) {
            el = typeof(el) !== "string" ? el : el.indexOf("#") == -1 ? "#" + el : el;
            var myEl = $.query(el).get(0);
            var newDiv, newId;
            if (!myEl) {
                newDiv = $.create("div", {
                    html: content
                });
                if (newDiv.children('.panel') && newDiv.children('.panel').length &gt; 0) newDiv = newDiv.children('.panel').get(0);
                else newDiv = newDiv.get(0);

                if (!newDiv.getAttribute("data-title") && title) newDiv.setAttribute("data-title",title);
                newId = (newDiv.id) ? newDiv.id : el.replace("#", ""); //figure out the new id - either the id from the loaded div.panel or the crc32 hash
                newDiv.id = newId;
                if (newDiv.id != el) newDiv.setAttribute("data-crc", el.replace("#", ""));
            } else {
                newDiv = myEl;
            }
            newDiv.className = "panel";
            newId = newDiv.id;
            this.addDivAndScroll(newDiv, refresh, refreshFunc);
            myEl = null;
            newDiv = null;
            return newId;
        },
            </code></pre>
             </div>
      </div>
          <h2>$.ui.addContentDiv(id,content,title);</h2>



          <section class='description'><p>Dynamically creates a new panel.  It wires events, creates the scroller, applies Android fixes, etc.<br />                      $.ui.addContentDiv("myDiv","This is the new content","Title");<br />           </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>Element - String|Object</li>
<li style='padding-left:15px;line-height:20px'>Content - String</li>
<li style='padding-left:15px;line-height:20px'>title - String</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.ui.addContentDiv(id,content,title) - This will create a new panel in your application for you.</p>

<p>This handles all the heavy lifting, like wiring scollers and calling android fixes if needed.  This will add the div to the DOM with the class="panel"</p>

<pre><code class="language-js"><span class='linenumber'>$.ui.addContentDiv("myTestPanel","This is a newly added panel","New Panel");</span>
</code></pre>

<p>Let's try it below.</p>

<script>
function addPanel(obj){
    if(obj.added)
        return $.ui.loadContent("#myTestPanel");
    else
        $.ui.addContentDiv("myTestPanel","This is a newly added panel","New Panel");
    obj.value="Load New Panel"
    obj.added=true;
}
</script>

<p><input type="button" value="Add Panel" onclick="addPanel(this)"></p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_scrollToTop' title='$.ui.scrollToTop(id);' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_scrollToTop",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_scrollToTop' style='display:none'>
            <pre style='padding-left:25px'><code>
            scrollToTop: function(id, time) {
            time = time || "300ms";
            id = id.replace("#", "");
            if (this.scrollingDivs[id]) {
                this.scrollingDivs[id].scrollToTop(time);
            }
        },
            </code></pre>
             </div>
      </div>
          <h2>$.ui.scrollToTop(id);</h2>



          <section class='description'><p>Scrolls a panel to the top<br />                      $.ui.scrollToTop(id);<br />           </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>id - String</li>
<li style='padding-left:15px;line-height:20px'>Time - string</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              
              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_scrollToBottom' title='$.ui.scrollToBottom(id);' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_scrollToBottom",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_scrollToBottom' style='display:none'>
            <pre style='padding-left:25px'><code>
            scrollToBottom: function(id, time) {
            id = id.replace("#", "");
            if (this.scrollingDivs[id]) {
                this.scrollingDivs[id].scrollToBottom(time);
            }
        },
            </code></pre>
             </div>
      </div>
          <h2>$.ui.scrollToBottom(id);</h2>



          <section class='description'><p>Scrolls a panel to the bottom<br />                      $.ui.scrollToBottom(id,time);<br />           </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>id - String</li>
<li style='padding-left:15px;line-height:20px'>Time - string</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              
              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_loadContent' title='$.ui.loadContent(target,newTab,goBack,transition);' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_loadContent",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_loadContent' style='display:none'>
            <pre style='padding-left:25px'><code>
            loadContent: function(target, newTab, back, transition, anchor) {

            if (this.doingTransition) {
                var that = this;
                this.loadContentQueue.push([target, newTab, back, transition, anchor]);
                return;
            }
            if (target.length === 0) return;

            var what = null;
            var loadAjax = true;
            anchor = anchor || document.createElement("a"); //Hack to allow passing in no anchor
            if (target.indexOf("#") == -1) {
                var urlHash = "url" + crc32(target); //Ajax urls
                var crcCheck = $.query("div.panel[data-crc='" + urlHash + "']");
                if ($.query("#" + target).length &gt; 0) {
                    loadAjax = false;
                } else if (crcCheck.length &gt; 0) {
                    loadAjax = false;
                    if (anchor.getAttribute("data-refresh-ajax") === 'true' || (anchor.refresh && anchor.refresh === true || this.isAjaxApp)) {
                        loadAjax = true;
                    } else {
                        target = "#" + crcCheck.get(0).id;
                    }
                } else if ($.query("#" + urlHash).length &gt; 0) {

                    //ajax div already exists.  Let's see if we should be refreshing it.
                    loadAjax = false;
                    if (anchor.getAttribute("data-refresh-ajax") === 'true' || (anchor.refresh && anchor.refresh === true || this.isAjaxApp)) {
                        loadAjax = true;
                    } else target = "#" + urlHash;
                }
            }
            if (target.indexOf("#") == -1 && loadAjax) {
                this.loadAjax(target, newTab, back, transition, anchor);
            } else {
                this.loadDiv(target, newTab, back, transition);
            }
        },
            </code></pre>
             </div>
      </div>
          <h2>$.ui.loadContent(target,newTab,goBack,transition);</h2>



          <section class='description'><p>This is called to initiate a transition or load content via ajax.<br />We can pass in a hash+id or URL and then we parse the panel for additional functions<br />                      $.ui.loadContent("#main",false,false,"up");<br />           </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>target - String</li>
<li style='padding-left:15px;line-height:20px'>newtab - Boolean</li>
<li style='padding-left:15px;line-height:20px'>go - Boolean</li>
<li style='padding-left:15px;line-height:20px'>transition - String</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.ui.loadContent(target, newTab, goBack, transition)</p>

<p>This allows you to programatically initiate a transition.  You specify the target panel, if it's a new tab and should clear the history, if it's going back, and the transition you want.</p>

<p>Below are two examples.  The first will go back with a pop transition and clear the history stack.  The second will go fowarded.</p>

<pre><code class="language-js"><span class='linenumber'>$.ui.loadContent("#af_ui",true,true,"pop");</span>
<span class='linenumber'>$.ui.loadContent("#af_ui",false,false,"slide");</span>
</code></pre>

<p><input type="button" value="Pop Back" onclick='$.ui.loadContent("#af_ui",true,true,"pop");'></p>

<p><input type="button" value="Slide Foward" onclick='$.ui.loadContent("#af_ui",false,false,"slide");'></p>

              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_launch' title='$.ui.launch();' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_launch",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_launch' style='display:none'>
            <pre style='padding-left:25px'><code>
            launch: function() {

            if (this.hasLaunched === false || this.launchCompleted) {
                this.hasLaunched = true;
                return;
            }

            var that = this;
            
            this.viewportContainer = af.query("#afui");
            this.navbar = af.query("#navbar").get(0);
            this.content = af.query("#content").get(0);
            this.header = af.query("#header").get(0);
            this.menu = af.query("#menu").get(0);
            //set anchor click handler for UI
            this.viewportContainer.on("click", "a", function(e) {
                if(that.useInteralRouting)
                    checkAnchorClick(e, e.currentTarget);
            });


            //enter-edit scroll paddings fix
            //focus scroll adjust fix
            var enterEditEl = null;

            //on enter-edit keep a reference of the actioned element
            $.bind($.touchLayer, 'enter-edit', function(el) {
                enterEditEl = el;
            });
            //enter-edit-reshape panel padding and scroll adjust
            $.bind($.touchLayer, 'enter-edit-reshape', function() {
                //onReshape UI fixes
                //check if focused element is within active panel
                var jQel = $(enterEditEl);
                var jQactive = jQel.closest(that.activeDiv);
                if (jQactive && jQactive.size() &gt; 0) {
                    if ($.os.ios || $.os.chrome) {
                        var paddingTop, paddingBottom;
                        if (document.body.scrollTop) {
                            paddingTop = document.body.scrollTop - jQactive.offset().top;
                        } else {
                            paddingTop = 0;
                        }
                        //not exact, can be a little above the actual value
                        //but we haven't found an accurate way to measure it and this is the best so far
                        paddingBottom = jQactive.offset().bottom - jQel.offset().bottom;
                        that.scrollingDivs[that.activeDiv.id].setPaddings(paddingTop, paddingBottom);

                    } else if ($.os.android || $.os.blackberry) {
                        var elPos = jQel.offset();
                        var containerPos = jQactive.offset();
                        if (elPos.bottom &gt; containerPos.bottom && elPos.height &lt; containerPos.height) {
                            //apply fix
                            that.scrollingDivs[that.activeDiv.id].scrollToItem(jQel, 'bottom');
                        }
                    }
                }
            });
            if ($.os.ios) {
                $.bind($.touchLayer, 'exit-edit-reshape', function() {
                    if (that.activeDiv && that.activeDiv.id && that.scrollingDivs.hasOwnProperty(that.activeDiv.id)) {
                        that.scrollingDivs[that.activeDiv.id].setPaddings(0, 0);
                    }
                });
            }


            //elements setup
            if (!this.navbar) {
                this.navbar = $.create("div", {
                    id: "navbar"
                }).get(0);
                this.viewportContainer.append(this.navbar);
            }
            if (!this.header) {
                this.header = $.create("div", {
                    id: "header"
                }).get(0);
                this.viewportContainer.prepend(this.header);
            }
            if (!this.menu) {
                this.menu = $.create("div", {
                    id: "menu",
                    html: '&lt;div id="menu_scroller"&gt;&lt;/div&gt;'
                }).get(0);
                this.viewportContainer.append(this.menu);
                this.menu.style.overflow = "hidden";
                this.scrollingDivs.menu_scroller = $.query("#menu_scroller").scroller({
                    scrollBars: true,
                    verticalScroll: true,
                    vScrollCSS: "afScrollbar",
                    useJsScroll: !$.feat.nativeTouchScroll,
                    noParent: $.feat.nativeTouchScroll,
                    autoEnable: true,
                    lockBounce: this.lockPageBounce
                });
                if ($.feat.nativeTouchScroll) $.query("#menu_scroller").css("height", "100%");
            </code></pre>
             </div>
      </div>
          <h2>$.ui.launch();</h2>



          <section class='description'><p>This is callled when you want to launch afui.  If autoLaunch is set to true, it gets called on DOMContentLoaded.<br />If autoLaunch is set to false, you can manually invoke it.<br />                      $.ui.autoLaunch=false;<br />           $.ui.launch();<br />           </p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol></ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.ui.launch() tells App Framework UI to run the startup code.  When $.ui.autoLaunch is set to true, this is called when the DOM is ready.</p>

<pre><code class="language-js"><span class='linenumber'>$.ui.autoLaunch=false;</span>
<span class='linenumber'>/* Do your stuff */</span>
<span class='linenumber'>function doLaunch(){</span>
<span class='linenumber'>    $.ui.launch();</span>
<span class='linenumber'>}</span>
<span class='linenumber'>document.addEventListener("appMobi.device.ready",doLaunch,false); //Intel apps</span>
<span class='linenumber'>document.addEventListener("deviceready",doLaunch,false);// Phonegap apps</span>
</code></pre>

              </div>
             </div>
          </article>
       </div>

       <div id='$_ui_finishTransition' title='$.ui.finishTransition(oldDiv)' data-nav='nav_af_ui' class='panel'>
       <div class='source'>
          <h3><a class='collapsed' onclick='toggleSource("$_ui_finishTransition",this)'>Show Source</a></h3>

            <div class='viewsource' id='source_$_ui_finishTransition' style='display:none'>
            <pre style='padding-left:25px'><code>
            clearAnimations: function(inViewDiv) {
            inViewDiv.style[$.feat.cssPrefix + 'Transform'] = "none";
            inViewDiv.style[$.feat.cssPrefix + 'Transition'] = "none";
        }
            </code></pre>
             </div>
      </div>
          <h2>$.ui.finishTransition(oldDiv)</h2>



          <section class='description'><p>This must be called at the end of every transition to remove all transforms and transitions attached to the inView object (performance + native scroll)</p></section>
          <article>
          <div class='spacer'></div>
             <h2>Params</h2>
             <ol><li style='padding-left:15px;line-height:20px'>Div - Object</li>
</ol>
             <div class='spacer'></div>
             <h2>Returns</h2>
             <div style='padding-left:30px;line-height:20px;'>null</div>
             <div class='spacer'></div>
             <div class='markdown'>

             <h2>Example</h2>
              <div class='markdowncontents'>
              <p>$.ui.finishTransition(oldDiv) must be called at the end of a transition to tell App Framework UI it can continue on.</p>

<p>When you are creating a custom transition, call this at the end with the div being "hidden".</p>

<pre><code class="language-js"><span class='linenumber'>function myNewTransition(){</span>
<span class='linenumber'>    //Do transition code</span>
<span class='linenumber'>    $.ui.finishTransition(oldDiv);</span>
<span class='linenumber'>}</span>
</code></pre>

              </div>
             </div>
          </article>
       </div>      </div>
      <!-- ------------------------------------------ -->
      <!-- navbar -->
      <div id="navbar">
          <a href='#appframework' class='icon home'>appframework</a><a href='#af_ui' class='icon home'>af.ui</a>      </div>
      <nav><div class='title'>API's</div><ul class='list'><li><a href='#appframework'>appframework</a></li><li><a href='#af_ui'>af.ui</a></li></ul></nav>
<nav id='nav_appframework' ><div class='title'>appframework</div><ul class='list'><li><a data-persist-ajax='true' href='#$_is$'>$.is$</a></li>
<li><a data-persist-ajax='true' href='#$_map'>$.map</a></li>
<li><a data-persist-ajax='true' href='#$_each'>$.each</a></li>
<li><a data-persist-ajax='true' href='#$_extend'>$.extend</a></li>
<li><a data-persist-ajax='true' href='#$_isArray'>$.isArray</a></li>
<li><a data-persist-ajax='true' href='#$_isFunction'>$.isFunction</a></li>
<li><a data-persist-ajax='true' href='#$_isObject'>$.isObject</a></li>
<li><a data-persist-ajax='true' href='#_map'>.map</a></li>
<li><a data-persist-ajax='true' href='#_each'>.each</a></li>
<li><a data-persist-ajax='true' href='#_ready'>.ready</a></li>
<li><a data-persist-ajax='true' href='#_find'>.find</a></li>
<li><a data-persist-ajax='true' href='#_html'>.html</a></li>
<li><a data-persist-ajax='true' href='#_text'>.text</a></li>
<li><a data-persist-ajax='true' href='#_css'>.css</a></li>
<li><a data-persist-ajax='true' href='#_vendorCss'>.vendorCss</a></li>
<li><a data-persist-ajax='true' href='#_computedStyle'>.computedStyle</a></li>
<li><a data-persist-ajax='true' href='#_empty'>.empty</a></li>
<li><a data-persist-ajax='true' href='#_hide'>.hide</a></li>
<li><a data-persist-ajax='true' href='#_show'>.show</a></li>
<li><a data-persist-ajax='true' href='#_toggle'>.toggle</a></li>
<li><a data-persist-ajax='true' href='#_val'>.val</a></li>
<li><a data-persist-ajax='true' href='#_attr'>.attr</a></li>
<li><a data-persist-ajax='true' href='#_removeAttr'>.removeAttr</a></li>
<li><a data-persist-ajax='true' href='#_prop'>.prop</a></li>
<li><a data-persist-ajax='true' href='#_removeProp'>.removeProp</a></li>
<li><a data-persist-ajax='true' href='#_remove'>.remove</a></li>
<li><a data-persist-ajax='true' href='#_addClass'>.addClass</a></li>
<li><a data-persist-ajax='true' href='#_removeClass'>.removeClass</a></li>
<li><a data-persist-ajax='true' href='#_toggleClass'>.toggleClass</a></li>
<li><a data-persist-ajax='true' href='#_replaceClass'>.replaceClass</a></li>
<li><a data-persist-ajax='true' href='#_hasClass'>.hasClass</a></li>
<li><a data-persist-ajax='true' href='#_append'>.append</a></li>
<li><a data-persist-ajax='true' href='#_appendTo'>.appendTo</a></li>
<li><a data-persist-ajax='true' href='#_prependTo'>.prependTo</a></li>
<li><a data-persist-ajax='true' href='#_prepend'>.prepend</a></li>
<li><a data-persist-ajax='true' href='#_insertBefore'>.insertBefore</a></li>
<li><a data-persist-ajax='true' href='#_insertAfter'>.insertAfter</a></li>
<li><a data-persist-ajax='true' href='#_get'>.get</a></li>
<li><a data-persist-ajax='true' href='#_offset'>.offset</a></li>
<li><a data-persist-ajax='true' href='#_height'>.height</a></li>
<li><a data-persist-ajax='true' href='#_width'>.width</a></li>
<li><a data-persist-ajax='true' href='#_parent'>.parent</a></li>
<li><a data-persist-ajax='true' href='#_parents'>.parents</a></li>
<li><a data-persist-ajax='true' href='#_children'>.children</a></li>
<li><a data-persist-ajax='true' href='#_siblings'>.siblings</a></li>
<li><a data-persist-ajax='true' href='#_closest'>.closest</a></li>
<li><a data-persist-ajax='true' href='#_filter'>.filter</a></li>
<li><a data-persist-ajax='true' href='#_not'>.not</a></li>
<li><a data-persist-ajax='true' href='#_data'>.data</a></li>
<li><a data-persist-ajax='true' href='#_end'>.end</a></li>
<li><a data-persist-ajax='true' href='#_clone'>.clone</a></li>
<li><a data-persist-ajax='true' href='#_size'>.size</a></li>
<li><a data-persist-ajax='true' href='#_serialize'>.serialize</a></li>
<li><a data-persist-ajax='true' href='#_eq'>.eq</a></li>
<li><a data-persist-ajax='true' href='#_index'>.index</a></li>
<li><a data-persist-ajax='true' href='#_is'>.is</a></li>
<li><a data-persist-ajax='true' href='#$_jsonP'>$.jsonP</a></li>
<li><a data-persist-ajax='true' href='#$_ajax'>$.ajax</a></li>
<li><a data-persist-ajax='true' href='#$_get'>$.get</a></li>
<li><a data-persist-ajax='true' href='#$_post'>$.post</a></li>
<li><a data-persist-ajax='true' href='#$_getJSON'>$.getJSON</a></li>
<li><a data-persist-ajax='true' href='#$_param'>$.param</a></li>
<li><a data-persist-ajax='true' href='#$_parseJSON'>$.parseJSON</a></li>
<li><a data-persist-ajax='true' href='#$_parseXML'>$.parseXML</a></li>
<li><a data-persist-ajax='true' href='#$_uuid'>$.uuid</a></li>
<li><a data-persist-ajax='true' href='#$_create'>$.create</a></li>
<li><a data-persist-ajax='true' href='#$_query'>$.query</a></li>
<li><a data-persist-ajax='true' href='#_bind'>.bind</a></li>
<li><a data-persist-ajax='true' href='#_unbind'>.unbind</a></li>
<li><a data-persist-ajax='true' href='#_one'>.one</a></li>
<li><a data-persist-ajax='true' href='#_delegate'>.delegate</a></li>
<li><a data-persist-ajax='true' href='#_undelegate'>.undelegate</a></li>
<li><a data-persist-ajax='true' href='#_on'>.on</a></li>
<li><a data-persist-ajax='true' href='#_off'>.off</a></li>
<li><a data-persist-ajax='true' href='#_trigger'>.trigger</a></li>
<li><a data-persist-ajax='true' href='#$_Event'>$.Event</a></li>
<li><a data-persist-ajax='true' href='#$_bind'>$.bind</a></li>
<li><a data-persist-ajax='true' href='#$_trigger'>$.trigger</a></li>
<li><a data-persist-ajax='true' href='#$_unbind'>$.unbind</a></li>
<li><a data-persist-ajax='true' href='#$_proxy'>$.proxy</a></li>
<li><a data-persist-ajax='true' href='#$_cleanUpContent'>$.cleanUpContent</a></li>
<li><a data-persist-ajax='true' href='#$_parseJS'>$.parseJS</a></li>
</ul></nav><nav id='nav_af_ui' ><div class='title'>af.ui</div><ul class='list'><li><a data-persist-ajax='true' href='#$_ui_setSideMenuWidth'>$.ui.setSideMenuWidth</a></li>
<li><a data-persist-ajax='true' href='#$_ui_disableNativeScrolling'>$.ui.disableNativeScrolling</a></li>
<li><a data-persist-ajax='true' href='#$_ui_manageHistory'>$.ui.manageHistory</a></li>
<li><a data-persist-ajax='true' href='#$_ui_loadDefaultHash'>$.ui.loadDefaultHash</a></li>
<li><a data-persist-ajax='true' href='#$_ui_useAjaxCacheBuster'>$.ui.useAjaxCacheBuster</a></li>
<li><a data-persist-ajax='true' href='#$_ui_actionsheet'>$.ui.actionsheet</a></li>
<li><a data-persist-ajax='true' href='#$_ui_popup'>$.ui.popup</a></li>
<li><a data-persist-ajax='true' href='#$_ui_blockUI'>$.ui.blockUI</a></li>
<li><a data-persist-ajax='true' href='#$_ui_unblockUI'>$.ui.unblockUI</a></li>
<li><a data-persist-ajax='true' href='#$_ui_removeFooterMenu'>$.ui.removeFooterMenu</a></li>
<li><a data-persist-ajax='true' href='#$_ui_autoLaunch'>$.ui.autoLaunch</a></li>
<li><a data-persist-ajax='true' href='#$_ui_showBackButton'>$.ui.showBackButton</a></li>
<li><a data-persist-ajax='true' href='#$_ui_backButtonText'>$.ui.backButtonText</a></li>
<li><a data-persist-ajax='true' href='#$_ui_resetScrollers'>$.ui.resetScrollers</a></li>
<li><a data-persist-ajax='true' href='#$_ui_ready'>$.ui.ready</a></li>
<li><a data-persist-ajax='true' href='#$_ui_setBackButtonStyle'>$.ui.setBackButtonStyle</a></li>
<li><a data-persist-ajax='true' href='#$_ui_goBack'>$.ui.goBack</a></li>
<li><a data-persist-ajax='true' href='#$_ui_clearHistory'>$.ui.clearHistory</a></li>
<li><a data-persist-ajax='true' href='#$_ui_updateBadge'>$.ui.updateBadge</a></li>
<li><a data-persist-ajax='true' href='#$_ui_removeBadge'>$.ui.removeBadge</a></li>
<li><a data-persist-ajax='true' href='#$_ui_toggleNavMenu'>$.ui.toggleNavMenu</a></li>
<li><a data-persist-ajax='true' href='#$_ui_toggleHeaderMenu'>$.ui.toggleHeaderMenu</a></li>
<li><a data-persist-ajax='true' href='#$_ui_toggleSideMenu'>$.ui.toggleSideMenu</a></li>
<li><a data-persist-ajax='true' href='#$_ui_disableSideMenu'>$.ui.disableSideMenu</a></li>
<li><a data-persist-ajax='true' href='#$_ui_enableSideMenu'>$.ui.enableSideMenu</a></li>
<li><a data-persist-ajax='true' href='#$_ui_updateNavbarElements'>$.ui.updateNavbarElements</a></li>
<li><a data-persist-ajax='true' href='#$_ui_updateHeaderElements'>$.ui.updateHeaderElements</a></li>
<li><a data-persist-ajax='true' href='#$_ui_updateSideMenuElements'>$.ui.updateSideMenuElements</a></li>
<li><a data-persist-ajax='true' href='#$_ui_setTitle'>$.ui.setTitle</a></li>
<li><a data-persist-ajax='true' href='#$_ui_setBackButtonText'>$.ui.setBackButtonText</a></li>
<li><a data-persist-ajax='true' href='#$_ui_showMask'>$.ui.showMask</a></li>
<li><a data-persist-ajax='true' href='#$_ui_hideMask'>$.ui.hideMask</a></li>
<li><a data-persist-ajax='true' href='#$_ui_showModal'>$.ui.showModal</a></li>
<li><a data-persist-ajax='true' href='#$_ui_hideModal'>$.ui.hideModal</a></li>
<li><a data-persist-ajax='true' href='#$_ui_updatePanel'>$.ui.updatePanel</a></li>
<li><a data-persist-ajax='true' href='#$_ui_updateContentDiv'>$.ui.updateContentDiv</a></li>
<li><a data-persist-ajax='true' href='#$_ui_addContentDiv'>$.ui.addContentDiv</a></li>
<li><a data-persist-ajax='true' href='#$_ui_scrollToTop'>$.ui.scrollToTop</a></li>
<li><a data-persist-ajax='true' href='#$_ui_scrollToBottom'>$.ui.scrollToBottom</a></li>
<li><a data-persist-ajax='true' href='#$_ui_loadContent'>$.ui.loadContent</a></li>
<li><a data-persist-ajax='true' href='#$_ui_launch'>$.ui.launch</a></li>
<li><a data-persist-ajax='true' href='#$_ui_finishTransition'>$.ui.finishTransition</a></li>
</ul></nav>
    </div>
    <script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36721400-4']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

  </body>
</html>

